Detailed explanation of controlled and uncontrolled component instances in React

In this article, we will share with you a detailed explanation of examples of controlled components and uncontrolled components in React. Before the detailed explanation, we will briefly introduce what controlled components and uncontrolled components are, hoping to help everyone.

Controlled component

In React, whenever the state of the form changes, it will be written to the state of the component. This kind of component is called controlled 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触发视图的重新渲染，完成表单组件值得更新。

Uncontrolled component

Simply put, if a form component does not have value props (corresponding to radio buttons and check boxes (are checked props) can be called uncontrolled components. In this way, we can use defaultValue and defaultChecked to 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.

Comparing controlled components and uncontrolled components

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.

<input
    value={this.state.value}
    onChange={(e) => this.setState({value: e.target.value})}
>

<input 
    defaultValue={this.state.value}
    onChange={e => {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!