不积跬步之重新认识一下react16.4后的生命周期

最新推荐文章于 2020-11-17 15:52:03 发布

雨飞飞雨

最新推荐文章于 2020-11-17 15:52:03 发布

阅读量658

点赞数

分类专栏：不积跬步文章标签： react 生命周期 getDerivedStateFromProps componentWillReceiveProps 16.4

本文链接：https://blog.csdn.net/yufeiant/article/details/100560493

版权

不积跬步专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近发现浏览器里爆出了下面的信息,是时候更新一波技术栈了。

原来的生命周期

生命周期可以划分为三部分：挂载，更新，卸载。

挂载时的生命周期：

constructor()
componentWillMount()
render()
componentDidMount()

更新时的生命周期

来自props的更新：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

来自state的更新：

shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

卸载的生命周期：

componentWillUnmouent()

这个生命周期的描述按照上面图片的划分，非常直观。盗用的程墨老师的图。

这里着重说一下两个生命周期的函数：

`componentWillReceiveProps`

这个生命周期在平时开发中用的非常多，我们主要是用来开发受控组件。

比如我们要开发一个组件，内部自己维护了一个state，但是这个state又要受父组件的控制。比如我们开发一个Select组件。我们要自己维护自己的state来控制显示的值。在必要的时候，又希望父组件可以直接插手它的更新。这个时候就用到了这个生命周期。

`shouldComponentUpdate(nextProps, nextState)`

这个生命周期在开发中应该用到的不多，我们在进行性能优化时，就可以使用它。

性能优化是根据这个函数的返回值来判断的。通过比较当前this.state和nextState或者是this.props和nextProps来判断是否需要更新。

但是官方不推荐你直接操作这个函数来控制渲染，这样有可能产生其他的Bug。推荐使用PureComponent。它内置了一个比较函数来进行性能优化，对props和state进行了浅层对比来判断是否更新。

所以使用它的时候推荐是在数据比较简单的时候使用。如果是数据比较复杂。推荐还是使用Component.

如果你的函数组件也想实现浅层比较同样的效果。可以使用这个方法：

`React.memo`

它是一个高阶组件，它与React.PureComponent 非常相似，但它适用于函数组件，但不适用于 class 组件。具体的情况可以查看官网的api

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

16.4以后的生命周期

react16.4以后生命周期.png

上面图片的官网地址

挂载时的生命周期：

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

更新时的生命周期

上面更新阶段时有三种情况的更新：new props,setState,forceupdate.

static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载时

componentWillUnmouent()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

static getDerivedStateFromError()
componentDidCatch()

可以看到在新的生命周期中去掉了三个过时的：

componentWillMount()
componentWillReceiveProps()
componentWillUpdate()

而添加了两个新的：

getDerivedStateFromProps()
getSnapshotBeforeUpdate()

逐步迁移计划安排

在升级到16.4版本以后，有三个生命周期被标注为不安全的。这里说的不安全并不是说有什么不安全的隐患，而是这三个生命周期未来会被取消。

componentWillMount
componentWillReceiveProps
componentWillUpdate

看一下官网给出的迁移计划安排：

React遵循语义版本控制，因此这种改变将是渐进的。我们目前的计划是：

16.3：介绍别名为不安全的生命周期，UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps，和UNSAFE_componentWillUpdate。（旧的生命周期名称和新别名都可以在此版本中使用。）
未来的16.x版本：启用弃用警告componentWillMount，componentWillReceiveProps和componentWillUpdate。（旧的生命周期名称和新别名都可以在此版本中使用，但旧名称将记录DEV模式警告。）
17.0：删除componentWillMount，componentWillReceiveProps和componentWillUpdate。（从现在开始，只有新的“UNSAFE_”生命周期名称可以使用。）

请注意，如果您是React应用程序开发人员，则不必对遗留方法执行任何操作。即将发布的16.3版本的主要目的是使开源项目维护者能够在任何弃用警告之前更新其库。在未来的16.x版本发布之前，不会启用这些警告。

我们在Facebook上维护了超过50,000个React组件，我们不打算立即重写它们。我们知道迁移需要时间。我们将与React社区中的每个人一起采取逐步迁移的方式。

这里官网提供了一个命令自动为过时的生命周期添加UNSAFE_前缀:

cd your_project
npx react-codemod rename-unsafe-lifecycles

过时的生命周期 `UNSAFE_componentWillMount()`

这个函数原来是componentWillMount()

为什么这些生命周期会过期呢？因为react要搞一个异步渲染。当以后异步渲染的时候，这些过时的生命周期在未来的版本中更容易出现错误。

UNSAFE_componentWillMount是在挂载之前被调用的。它在render()之前调用。因此在此方法中同步调用setState()不会触发额外渲染。

如果你在这个方法里进行初始化state的操作，建议使用constructor()来进行初始化state.

如果你在这个方法里引入任何副作用或订阅的操作。请改用componentDidMount()。

过时的生命周期 `UNSAFE_componentWillReceiveProps()`

这个函数原来是componentWillReceiveProps()

UNSAFE_componentWillReceiveProps()是已经挂载的组件再接收到新的props之前被调用。如果需要更改状态以响应props。你可以比较this.props和nextProps，并在此方法中使用this.setState()对state重新设置。

在组件第一次挂载的时候并不会执行该方法。需要注意的是:当父组件重新渲染时，即使props没有更改也会触发这个方法。所以调用这个方法的时候需要做好比较的操作。

在官网中：不推荐使用该方法来，因为它通常会出现bug和不一致性：

注意:

如果你需要执行副作用（例如，数据提取或动画）以响应 props 中的更改，请改用 componentDidUpdate 生命周期。
如果你使用 componentWillReceiveProps 仅在 prop 更改时重新计算某些数据，请使用 memoization helper 代替。
如果你使用 componentWillReceiveProps 是为了在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使用 key 使组件完全不受控代替。
对于其他使用场景，请遵循此博客文章中有关派生状态的建议。

我们通常是使用该函数做受控组件。在官网的这篇文章中你可能不需要使用派生 state

解释了上面注意中的第三条，为什么推荐使用完全受控组件或者使用key使组件完全不受控来代替componentWillReceiverProps。

具体的例子我会在后面讲到：

过时的生命周期 `UNSAFE_componentWillUpdate()`

这个函数原来是componentWillUpdate()。

UNSAFE_componentWillUpdate()这个函数我们基本上都用不到。它的含义是：当组件收到新的props和state时，在渲染之前会调用UNSAFE_componentWillUpdate这个方法。使用它作为在更新发生之前执行准备更新的工作。

在初始化渲染不会执行。

注意：不要在这个方法里调用this.setState()，也不要在这里执行dispatch触发action。或者是异步获取数据等操作。

如果你想要执行这些操作可以放到componentDidUpdate()中。如果要获取DOM信息，可以放到getSnapshotBeforeUpdate()中。

如果shouldComponentUpdate()返回false。则不会调用UNSAFE_componentWillUpdate()方法。

新的生命周期–取代他们三个的`static getDerivedStateFromProps(props, state)`

可以看到该方法是一个静态函数。既然是静态函数，那么就没有办法访问组件的实例。因为它是优先于组件的实例创建的。

由于getDerivedStateFromProps取代了那三个过时的函数，也就造成它特别的忙。组件第一次加载会麻烦它，props，setState,forceUpdate三个更新时也会麻烦它。所以这也是需要注意的地方：每一次渲染之前都会调用该方法，而componentWillReceiveProps只会在父组件重新渲染时触发，不包括内部调用setState的时候。

它的用法是返回一个对象来更新state,如果返回null则不更新任何内容。

它的用法就相对于componentWillReceiveProps就要麻烦一点了。所以在官方的文档里着重的说了一下你在什么样的情况下需要用到它，而其他的情况下，可以换个方案来实现。

派生状态会导致代码冗余，并使组件难以维护。确保你已熟悉这些简单的替代方案：

如果你需要执行副作用（例如，数据提取或动画）以响应 props 中的更改，请改用 componentDidUpdate。
如果只想在 prop 更改时重新计算某些数据，请使用 memoization helper 代替。
如果你想在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使用 key 使组件完全不受控代替。

具体使用方法我们在后面的一篇文章里聊。

新的生命周期–getSnapshotBeforeUpdate()

这个方法并不常用.getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

错误处理组件–Error boundaries

Error boundaries是一个React组件，它会在其组件中的的任何位置捕获JavaScript错误，并记录这些错误，展示降级UI而不是崩溃的组件树。Error boundaries 组件会捕获在渲染期间，在生命周期方法以及其整个树的构造函数中发生的错误。

如果 class 组件定义了生命周期方法 static getDerivedStateFromError() 或 componentDidCatch() 中的任何一个（或两者），它就成为了 Error boundaries。通过生命周期更新 state 可让组件捕获树中未处理的 JavaScript 错误并展示降级 UI。

static getDerivedStateFromError(error)

这个生命周期会在后代组件抛出错误被调用。它将抛出的错误作为参数，并返回一个值来更新state.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显降级 UI
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级  UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

这样使用：

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

需要注意的是：getDerivedStateFromError() 会在渲染阶段调用，因此不允许出现副作用。如遇此类情况，请改用componentDidCatch() 。

componentDidCatch()

此生命周期在后代组件抛出错误后被调用，它接收两个参数：

error–抛出的错误
info–带有componentStack key的对象。包含了有关组件引发错误的栈信息。

componentDidCatch()会在提交阶段被调用。因此适合在发生错误以后，把错误记录提交给后台的操作。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显示降级 UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // "组件堆栈" 例子:
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级 UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

他们两个的用法上推荐：

使用static getDerivedStateFromError()方法来处理降级渲染。
使用componentDidCatch()方法来提交错误信息到后端。

参考文章：

详解React生命周期(包括react16版)；

雨飞飞雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
不积跬步之重新认识一下react16.4后的生命周期

最近发现浏览器里爆出了下面的信息,是时候更新一波技术栈了。原来的生命周期生命周期可以划分为三部分：挂载，更新，卸载。挂载时的生命周期：constructor()componentWillMount()render()componentDidMount()更新时的生命周期来自props的更新：componentWillReceiveProps()shouldCom...
复制链接

扫一扫