聊聊React中的受控组件与非受控组件——个人理解(Talk about controlled and uncontrolled components in react – personal understanding)

一、受控组件

1.受控组件的概念:

  在React中,可变状态通常保存在组件的状态属性中,并且只能使用setState()进行更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式,成为受控组件。

2.受控组件更新state的流程:

         a.通过初始state中设置表单的默认值

         b.每当表单的值发生变化时,调用onChange事件处理器

         c.事件处理器通过事件对象event拿到改变后的状态,并更新组件的state

         d.一旦通过setState方法更新state,就会触发视图重新渲染,完成表单组件的更新

二、非受控组件

1.非受控组件:

  非受控组件指的是表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示的最新值。

2.非受控组件的使用:

  在非受控组件中,由于无法直接使用js中dom操作,所以我们可以使用ref来从DOM中获得表单值。非受控组件在底层实现时是在其内部维护了自己的状态state,这样表现出用户输入任何值都能反映到元素上。

三、受控组件与非受控组件的区别

  1.受控组件

    a.受控组件依赖于状态(它是通过setState来更新表单数据,可以对表单进行操作)

    b.受控组件的修改会实时映射到状态值上,此时可以对输入的内容进行校验

    c.受控组件只用继承React.Component才会有状态(这个区别自己还是一知半解)

    d.受控组件必须要在表单上使用onChange事件来绑定对应的事件(表单元素通过onChange发生改变时触发setState更新状态)

  2.非受控组件

    a.非受控组件不受状态的控制

    b.非受控组件获取数据就相当于操作DOM(通过ref来获取数据)

    c.非受控组件可以很容易与第三方组件结合,更容易同时集成React和非React代码

四、如何选择受控组件还是非受控组件

  1、受控组件使用场景:

    一般用在需要动态设置其初始值的情况。例如:某些form表单信息编辑时,input表单元素需要初始显示服务器返回的某个值然后进行编辑。

  2、非受控组件使用场景:

    一般用于无任何动态初始值信息的情况。例如:form表单创建信息时,input表单元素都没有初始值,需要用户输入的情况。

五、react关于受控非受控组件的中文文档

  https://zh-hans.reactjs.org/docs/forms.html#controlled-components

————————

< strong > I. controlled components < / strong >

1. Concept of controlled component: < / strong >

In react, the variable state is usually saved in the state attribute of the component and can only be updated with setstate(). The react component that presents the form also controls what happens in the form during subsequent user input. In this way, the value of the input table element controlled by react is changed to become a controlled component

2. Process for updating state of controlled components: < / strong >

A. set the default value of the form in the initial state

B. call onchange event handler whenever the value of the form changes

C. the event processor obtains the changed state through the event object event and updates the state of the component

D. once the state is updated through the setstate method, the view re rendering will be triggered to complete the update of the form component

< strong > II. Uncontrolled components < / strong >

1. Uncontrolled component: < / strong >

< strong > < / strong > uncontrolled component means that < strong > form data is processed by the DOM itself < / strong >. That is, < strong > is not controlled by setstate() < / strong >, which is similar to the traditional HTML form input. The input value is the latest value displayed.

2. Use of uncontrolled components: < / strong >

In uncontrolled components, since DOM operations in JS cannot be used directly, we can use ref to obtain form values from dom. Uncontrolled components maintain their own state state in the underlying implementation, which shows that any value entered by the user can be reflected on the element.

< strong > III. differences between controlled components and uncontrolled components < / strong >

1. Controlled component < / strong >

A. the controlled component depends on the state (it updates the form data through setstate and can operate the form)

B. the modification of controlled components will be mapped to the status value in real time. At this time, the input content can be verified

C. controlled components only inherit react Component will have state (I still know a little about this difference)

D. the controlled component must use onchange event on the form to bind the corresponding event (when the form element changes through onchange, it triggers setstate to update the state)

2. Uncontrolled components < / strong >

A. uncontrolled components are not controlled by the state

B. obtaining data by uncontrolled components is equivalent to operating DOM (obtaining data through ref)

C. uncontrolled components can be easily combined with third-party components, making it easier to integrate react and non react code at the same time

< strong > IV. how to select controlled or uncontrolled components < / strong >

< strong > 1. Usage scenario of controlled components: < / strong >

It is generally used when the initial value needs to be set dynamically. For example, when editing some form information, the input form element needs to initially display a value returned by the server and then edit it.

< strong > 2. Usage scenario of uncontrolled components: < / strong >

It is generally used when there is no dynamic initial value information. For example, when creating information in a form, the input form elements have no initial value and need to be entered by the user.

< strong > v. react Chinese document on controlled and uncontrolled components < / strong >

  https://zh-hans.reactjs.org/docs/forms.html#controlled-components