【react】---17新增的生命周期

 

一、废除的生命周期

 

　　官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本

　　由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数

　　componentWillMount

　　componentWillRecieveProps

　　componentWIllUpdate

 

二、新增的生命周期

　　

　 static getDerivedStateFromProps(nextProps, prevState) {} 
　　　　　　[dɪ'raɪvd] 

　　用于替换componentWillReceiveProps，可以用来控制 props 更新 state 的过程；它返回一个对象表示新的 state；如果不需要更新，返回 null 即可

　　在每次渲染之前都会调用，不管初始挂载还是后面的更新都会调用，这一点和componentWillReceiveProps不同（只有当父组件造成重新渲染时才调用），每次都应该返回一个对象作为

 　


　getSnapshotBeforeUpdate() {}         

 　　[ˈsnæpʃɑ:t]

　　用于替换 componentWillUpdate，该函数会在update后 DOM 更新前被调用，用于读取最新的 DOM 数据，返回值将作为 componentDidUpdate 的第三个参数

　　在最新的渲染数据提交给DOM前会立即调用，它让你在组件的数据可能要改变之前获取他们

 

 

　　componendDidCatch(error, info)

　　如果一个组件定义了componentDidCatch生命周期，则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误，

　　就像使用了try catch，不会将错误直接抛出了，保证应用的可用性)

 

三、基本使用

　　

class A extends React.Component {
  // 用于初始化 state
  constructor() {}
  // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用
  // 因为该函数是静态函数，所以取不到 `this`
  // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
  static getDerivedStateFromProps(nextProps, prevState) {}
  // 判断是否需要更新组件，多用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}
  // 组件挂载后调用
  // 可以在该函数中进行请求或者订阅
  componentDidMount() {}
  // 用于获得最新的 DOM 数据
  getSnapshotBeforeUpdate() {}
  // 组件即将销毁
  // 可以在此处移除订阅，定时器等等
  componentWillUnmount() {}
  // 组件销毁后调用
  componentDidUnMount() {}
  // 组件更新后调用
  componentDidUpdate() {}
  // 渲染组件函数
  render() {}
}