React16生命周期

react生命周期，先上官网的图

react16生命周期.png

关于各生命周期函数的参数、返回值以及何时执行，啥也不说了，上代码，自己跑一边就啥都明白了。

//组件

class Testlifecycles extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor');
    this.handleClick = this.handleClick.bind(this);
    this.state = {b: 1};
    // getDefaultProps：接收初始props
    // getInitialState：初始化state
  }
  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps', props, state);

    // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
    return state;
  }
  componentDidCatch(error, info) {
    console.log('componentDidCatch', error, info);
    // 获取到javascript错误
  }
  handleClick() {
    this.props.parentClick();
  }
  render() {
    return <h2 onClick={this.handleClick}>点击试一下，a:{this.props.a}</h2>;
  }
  componentDidMount() {
    console.log('componentDidMount');
    // 挂载后
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate', nextProps, nextState);

    // 组件Props或者state改变时触发，true：更新，false：不更新
    return true;
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate', prevProps, prevState);
    // 组件更新前触发
    return null;
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
    // 组件更新后触发
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
    // 组件卸载时触发
  }
}

//在App中调用Testlifecycles组件
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {a: 1};
  }
  parentClick() {
    this.setState({a: 2});
  }

  render() {
    let x;
    if (this.state.a === 1) {
      x = (
        <Testlifecycles
          parentClick={() => this.parentClick()}
          a={this.state.a}
        />
      );
    } else {
      x = <div>estlifecycles组件被卸载</div>;
    }
    return <div>{x}</div>;
  }
}
//将App挂载到根节点下
ReactDOM.render(<App />, document.getElementById('root'));

参考资料：
生命周期图谱
React.Component
React-新的生命周期（React16版本）