React生命周期

• 旧生命周期：

  1、挂载时（由ReactDom.render()触发）：constrcutor()——componentWillMount()——render()——componentDidMount()

  2、setState()时：shouldComponentUpdate()——componentWillUpdate()——render()——componentDidUpdate()

  3、forceUpdate()时：componentWillUpdate()——render()——componentDidUpdate()

  4、父组件render()时：componentWillReceiveProps()——shouldComponentUpdate()——componentWillUpdate()——render()——componentDidUpdate()

  5、卸载时（由ReactDom.unmountComponentAtNode()触发）：componentWillUnmount()

• 新生命周期：

  废弃：componentWillMount()、componentWillUpdate()、componentWillReceiveProps()

  新增：getDerivedStateFromProps()、getSnapshotBeforeUpdate()

  1、挂载时（由ReactDom.render()触发）：constrcutor()——getDerivedStateFromProps()——render()——componentDidMount()

  2、setState()时、父组件render()时：getDerivedStateFromProps()——shouldComponentUpdate()——render()——getSnapshotBeforeUpdate()——componentDidUpdate()

  3、forceUpdate()时：getDerivedStateFromProps()——render()——getSnapshotBeforeUpdate()——componentDidUpdate()

  //state的值在任何时候都取决于props
  static getDerivedStateFromProps(props,state){
      return props
  }
  //在更新前获取快照
  getSnapshotBeforeUpdate(){
      return this.refs.list.scrollHeight
  }
  //将getSnapshotBeforeUpdate的返回值作为第三个参数传入
  componentDidUpdate(preprops,prestate,height){
      this.refs.list.scrollTop += this.refs.list.scrollHeight - height
  }