What are the methods for react to update state?-Front-end Q&A-php.cn

What are the methods for react to update state?

藏色散人

Release： 2022-11-09 15:31:03

Original

1948 people have browsed it

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.

What are the methods for react to update state?

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: &#39;&#39;,
       targets: &#39;&#39;,
     }
    }
  componentDidMount() {
   const { a, b } = this.state
   const data = {a,b}
   fetch(&#39;/Url&#39;, {
     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(&#39;/Url&#39;, {data}).then(res => {
     if (res.code === 0) {
       this.setState({
         treeData: res.a,
         targets: res.b,
       })
     } else {
       message.error(res.errmsg)
     }
   })
 }
}
export default Children

Copy after login

Method 1: Use key skillfully

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

Copy after login

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: &#39;1&#39;,
       b: &#39;2&#39;,
      }
      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>
}
}

Copy after login

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:&#39;1&#39;,
       b:&#39;2&#39;,
       data:&#39;&#39;,
      }
    }
  getcomposedata() {
    const { a, b } = this.state
    const data = { a, b }
    fetch(&#39;/Url&#39;, {data}).then(res => {
      if (res.code === 0) {
        this.setState({
          data:res.data
        })
      } else {
        message.error(res.errmsg)
      }
    })
  }
render() {
 <Children data={this.state.data}} />  
}
}

Copy after login

Child component:

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

Copy after login

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!