What are the methods for react to update state?

The react state update methods are: 1. Change subcomponents through key, code such as "”; 2. Use the ref parent component to call the child component function; 3. Pass data to the child through the parent, and the child is only responsible for rendering.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

What are the methods for updating state in react?

In react, there are many ways to update child state when parent props change.

Subcomponent:

class Children extends Component {
  constructor(props) {
     super(props);
     this.state = {
       a: this.props.a,
       b: this.props.b,
       treeData: '',
       targets: '',
     }
    }
  componentDidMount() {
   const { a, b } = this.state
   const data = {a,b}
   fetch('/Url', {
     data
   }).then(res => {
   if (res.code === 0) {
     this.setState({
     treeData: res.a,
     targets: res.b,
  })
  } else {
   message.error(res.errmsg)
  }
  })
  }
 test(item1, item2) {
   const data = { item1, item2 }
   fetch('/Url', {data}).then(res => {
     if (res.code === 0) {
       this.setState({
         treeData: res.a,
         targets: res.b,
       })
     } else {
       message.error(res.errmsg)
     }
   })
 }
}
export default Children

Method 1: Use key skillfully

<Children key={this.state.key} a={this.state.a} b={this.state.b} /> //父组件调用子组件

This method is that the subcomponent will be re-instantiated through key changes (key changes in react will destroy the component before re-instantiating it) Component)

Method 2: Use the ref parent component to call the subcomponent function (does not comply with react design specifications, but it can be regarded as an escape exit)

class father extends Component {
    constructer(props) {
      super(props);
      this.state={
       a: '1',
       b: '2',
      }
      this.myRef
      this.test = this.test.bind(this)
    }
   change() {
     const { a,b } = this.state
     console.log(this.myRef.test(a,b)) // 直接调用实例化后的Children组件对象里函数
    }
render() {
 <Children wrappedComponentRef={(inst) => { this.myRef = inst } } ref={(inst) => { this.myRef = inst } } />  
 <button onClick={this.test}>点击</button>
}
}

Note: wrappedComponentRef is react-router Used in v4 to solve the problem that high-order components cannot correctly obtain ref (non-high-order components need to be removed)

Method 3: The parent passes data to the child, and the child is only responsible for rendering (most in line with react design concepts) )recommend! !

Parent component:

class father extends Component {
    constructer(props) {
      super(props);
      this.state={
       a:'1',
       b:'2',
       data:'',
      }
    }
  getcomposedata() {
    const { a, b } = this.state
    const data = { a, b }
    fetch('/Url', {data}).then(res => {
      if (res.code === 0) {
        this.setState({
          data:res.data
        })
      } else {
        message.error(res.errmsg)
      }
    })
  }
render() {
 <Children data={this.state.data}} />  
}
}

Child component:

  componentWillReceiveProps(nextProps) {
    const { data } = this.state
    const newdata = nextProps.data.toString()
    if (data.toString() !== newdata) {
      this.setState({
        data: nextProps.data,
      })
    }
  }

Note: React’s componentWillReceiveProps cycle is the existence period, and the changed props are used to judge and update its own state

Recommended learning: "react video tutorial"

The above is the detailed content of What are the methods for react to update state?. For more information, please follow other related articles on the PHP Chinese website!