react新版本生命周期

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部