首页 > itarticle > react生命周期

react生命周期

admin 11月 14, 2020 0

React生命周期分为三种状态，分别是mounting,updating,unmounting;意味着已插入真实的DOM，正在被重新渲染，已从真实的DOM移除。
因此，对应的生命周期方法有：
componentWillMount ，componentDidMount ，
componentWillReceiveProps ，shouldComponentUpdate ，
componentWillUpdate，componentDidUpdate ，
componentWillUnmount。

例子

class TestComp extends React.Component {
   () {
     console.log("componentWillMount");
   }
    componentDidMount() {
       //可以在该方法中调用setTimeout，setInterval等操作。
        console.log("componentDidMount");
    }
    componentWillReceiveProps(newProps) {
        console.log("componentWillReceiveProps");
    }
    shouldComponentUpdate(newProps, newState) {
      console.log("shouldComponentUpdate");
        //如果为false，不会执行后面的生命周期方法
        return true;
  }
    componentWillUpdate(newProps, newState) {
        console.log("componentWillUpdate");
  }
    componentDidUpdate(newProps, newState) {
     console.log("componentDidUpdate");
   }
    componentWillUnmount() {
        console.log("componentWillUnmount");
 }

   render() {
      return (
           <div>
              <h3>{this.props.number}</h3>
         </div>
     );
   }
}

class IncreButton extends React.Component {
 constructor(props) {
     super(props);
        this.state =  {number: 0};
   }

   setNewNumber = () => {
        this.setState({number: this.state.number +1});
   }
    render() {
      return (
           <div>
              <button onClick = {this.setNewNumber}>加1</button>
                <TestComp number = {this.state.number}></TestComp>
           </div>
     );
   }
}

ReactDOM.render(
    <div>
      <IncreButton />
    </div>,
    document.getElementById("example")
);

注:
1.页面一加载，componentWillMount，componentDidMount
2.每次点击加1按钮后，componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，componentDidUpdate