React生命周期

生命周期（新）♥

新版本可以使用旧的生命周期钩子

react生命周期(新)

新的生命周期钩子中，有三个钩子出现了警告，

• componentWillMount

• componentWillUpdate

• componentWillReceiveProps

  需要在前方加上 UNSAFE_ React 官方说将在未来会上线异步渲染，这些钩子可能会出现问题

新的钩子：

• getDerivedStateFromPorps

• getSnapshotBeforeUpdate

  getDerivedStateFromPorps()

  派生状态

  需要加上 static，变为静态方法，这个钩子用途很罕见，这个钩子的原则就是，state 的值在任何时候都取决于 props。

  getSnapshotBeforeUpdate（）

  这个钩子 是 更新 DOM 之前，渲染之后，

  • 此钩子的返回值将作为参数，传递给 componentDidUpdate（）；
  • 此方法不常用，滚动条固定可以使用这个，

新生命周期

• 挂载过程

1. constructor
2. getSnapshotBeforeUpdate()
3. render
4. componentDidmount() //发请求，订阅消息，定时器开启

• 更新过程 由 setState 触发，或者父组件传入 Props 触发

  1. getSnapshotBeforeUpdate()
  2. shouldComponentUpdate()
  3. render
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdate()

• 卸载过程

  1. componentWillUnmount()

即将废弃的钩子

• componentWillUpdate();

• componentWillMount();

• componentReviceProps();

  必须加上 UNSAFE 才能使用，未来可能废弃了，这三个钩子也不常用