Controlled components and uncontrolled components

When designing the React component, pay attention to the data source and ensure that each data source has only one data source. For example, a state cannot change by setState, and varies by props (componentWillReceiveProps or getDerivedStateFromProps, for example).

Once you have multiple data sources, redesign them as follows.

getDerivedStateFromProps

stateOnly bypropsThe influence of;

Only when thestate 与 propAt the same time, to modifystate;

The controlled components

A controlled component is a component whose state is fully controlled by Prop. In general, it is recommended to design components as fully controlled components.

Const ControlComponent = (props) => {reutrn (<div>{props. Name}</div>)} // Class ControlComponent extends React.Component { state = { name: 'XXX'} // uses the updated state of the getDerivedStateFromProps class. It is best not to use // setState in the component to make sure the data source is unique. staric getDerivedStateFromProps(nextProps, preState) { return {name: nextProps.name} } }Copy the code

This component is a fully controlled component that has no state of its own and changes completely as props changes.

Uncontrolled component

Uncontrolled valence means that a component has state. The state is only stored in the component and is not affected by the props, but is changed by setState inside the component.

class NoncontrolComponent extends React.Component {
  state = {
    name: 'inside'
  }

  change = () => {
    this.setState({name: 'newName'})
  }

  render() {
    const { name } = this.state
    return (<button onClick={this.change}>{name}</button>)
  }
}
Copy the code

Components with keys

We know that a key is used to identify a component. React uses the key to determine which elements in the array have changed and which elements have been added or removed. If a key in the array disappears, React assumes that the element has been deleted and reacts.

So with this feature, we can set a dynamic key to an uncontrolled component. When you need to reset (? We can simply change the key value while rebuilding the uncontrolled component.

The key can be meaningful or randomly generated.

Resets an uncontrolled component with the ID of a prop

If you do not set a key for an uncontrolled component, but still want to reset/change the component, you can achieve the same goal by setting an additional identifier in the component.

class NoncontrolComponent extends React.Component { state = { name: this.props.name, id: this.props.id } static getDerivedStateFromProps(props, state) { if (props.id ! == state) {return {name: props. Name, id: props. Id}} return nullCopy the code

Use instance methods to reset uncontrolled components

Alternatively, we can create a method in the component that resets state and then have the parent component call that method through ref to change the state of the component.

Class NoncontrolComponent extends React.Component {state = {name:  'xxx' } reset = name => { this.setState({ name }) } .... } / / parent components using this.refs.com ponent. Reset () can change the component stateCopy the code

Reference: You probably don’t need to use derived state

Controlled components and uncontrolled components