In React, whenever the state of the form changes, it will be written to the state of the component. This kind of component is calledcontrolled component in React. Control component. In a controlled component, the component's rendering state corresponds to its value or checked.React eliminates the local state of components in this way.React officially recommends using controlled components.
Controlled component update state process:
1. 可以通过在初始state中设置表单的默认值。 2. 每当表单的值发生变化时,调用onChange事件处理器。 3. 事件处理器通过合成事件对象e拿到改变后的状态,并更新state。 4. setState触发视图的重新渲染,完成表单组件值得更新。
Simply put, if a form component does not have value props (corresponding to radio buttons and check boxes (are checked props) can be calleduncontrolled components. In this way, we can usedefaultValueanddefaultCheckedto represent the default state of the component.
In React, an uncontrolled component is an anti-pattern. Its value is not controlled by the component's own state or props. It is usually necessary to add a ref prop to access the rendered underlying DOM. element.
We just saw that the default value of the form is set through defaultValue or defaultChecked.It will only be rendered once. It has no effect on subsequent renderings.
this.setState({value: e.target.value})} > {this.setState({value: e.target.value})}} >
In the controlled component, the content entered with the book can be output and displayed, while in the uncontrolled component, if the onChange event is not bound, nothing we input in the text box will be displayed. Will show.You can see that the biggest difference between controlled components and uncontrolled components is that the state of uncontrolled components is not controlled by the application state. There are also local component states in the application, and the value of the controlled component comes from state.
Performance issues
In controlled components, every time the value of the form changes, Calling the onChange time processor once will cause some performance consumption. However, it is not recommended to use controlled components in React. This problem can be achieved through the redux application architecture to achieve state unification.
Related recommendations:
React component life cycle instance analysis
What is the life cycle function of React component
The most complete way to build React components
The above is the detailed content of Detailed explanation of controlled and uncontrolled component instances in React. For more information, please follow other related articles on the PHP Chinese website!