React生命周期钩子函数（新版）

React生命周期钩子函数（新版）

实例化

1. 渲染前 static getDerivedStateFromProps(nextProps,nextState) {}

   无法访问this
   nextProps,nextState是更新后的
   必须返回 一个对象，用来更新state 或者 返回 null不更新
   必须要初始化state
   state 的值在任何时候都取决于 props时
   

2. 渲染中 render

   必须return jsx|string|number|null
   不会直接与浏览器交互:不要操作DOM|和数据

3. 挂载后 componentDidMount

更新期

1. 渲染前 static getDerivedStateFromProps(nextProps, nextState)

2. 是否渲染 shouldComponentUpdate(nextProps, nextState)

   是否更新，必须返回true/false
   首次渲染或使用 forceUpdate() 时不会调用该方法
   nextProps,nextState更新后的,this.props,this.state 更新前的
   return false 只阻止当前组件渲染

3. 渲染中 render

4. dom快照 getSnapshotBeforeUpdate(prevProps, prevState)

   组件能在发生更改之前从 DOM 中捕获一些信息（dom渲染前的状态)
   返回的 值|null 会给 componentDidUpdate
   prevProps, prevState 更新前 this.props,this.state更新后

5. 更新后 componentDidUpdate(prevProps, prevState,snopshot)

   this.props.更新后的
   snopshot 是 getSnapshotBeforeUpdate构造的返回值

   抓取到的是渲染后的dom状态，通过snopshot拿到dom渲染前的状态

销毁时

即将卸载 componentWillUnmount