react新版本生命周期

react

react发布16版本后有了很多新增特性,之前有一直看这些新的变化但是却没有做什么总结,这里对生命周期的变化作个记录~~后面也会继续总结其他的新特性,仅仅观看下面的介绍你可能不能够了解它们的作用,你可以参照官方API完成一些demo来加深了解,如果发现错误请告诉我

  • componentWillMountcomponentWillReceivePropscomponentWillUpdate生命周期加上UNSAFE_前缀,表明其不安全性,并将在未来版本将其移除
    • 官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug,尤其是对于异步渲染的版本

  • 新增生命周期static getDerivedStateFromProps(prevProps, prevState)getSnapshotBeforeUpdate(prevProps, prevState)componendDidCatch(error, info)

static getDerivedStateFromProps(prevProps, prevState)

  • 在每次渲染之前都会调用,不管造成重新渲染的原因,不管初始挂载还是后面的更新都会调用,这一点和UNSAFE_componentWillReceiveProps不同(只有当父组件造成重新渲染时才调用),每次都应该返回一个对象作为state的更新,或者返回null表示不更新
  • 它的使用场景一般为依赖于props的变化去做一些状态的更新,让我们能够根据props的变化去更新内部的状态,以前我们经常在componentWillReceiveProps中完成该操作
  • 但是你需要考虑是否真的有必要使用这个生命周期,比如:

    • 如果你需要根据网络请求获取数据,你可以在componentDidUpdate里完成
    • props改变时,你需要去重新计算某些数据,可以使用memoization helper替代
    • 当props改变时,如果你想要重置一些state,可以考虑使用Fully controlled component(完全移出state的使用,通过父组件控制数据)或者Fully uncontrolled component(数据仅存在内部状态中)

getSnapshotBeforeUpdate

  • 在最新的渲染数据提交给DOM前会立即调用,它让你在组件的数据可能要改变之前获取他们,他的返回值会被传递给componentDidUpdate的第三个参数

componentDidCatch

  • 如果一个组件定义了componentDidCatch生命周期,则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误,就像使用了try catch,不会将错误直接抛出了,保证应用的可用性)

以上是 react新版本生命周期 的全部内容, 来源链接: utcz.com/z/382687.html

回到顶部