React 16.4+ 的生命周期

React 16.4+生命周期图.png

广义上,React 生命周期分为三个阶段:挂载渲染(更新)卸载。因此也可以将生命周期分为两类,挂载卸载过程更新过程

挂载

初始化 -> getDerivedStateFromProps -> render -> React 更新 DOM 和 refs -> componentDidMount

挂载阶段主要是初始化组件,并设置默认 propsstate,然后进入 getDerivedStateFromProps 的方法,这个方法将贯穿挂载渲染两大阶段。

16.4 开始 React 就废弃了几个生命周期方法,这使得每个阶段都变得更简单高效。但这么搞也会让某些特定场景变得无从下手,所以引入 getDerivedStateFromProps 代替之。

渲染

更新动作 -> getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> React 更新 DOM 和 refs -> componentDidUpdate

触发渲染的三个场景:new propssetState()forceUpdate()

先说说 props,无论是新传参还是父组件重新 render 导致 props 重新传入(不管 props 有没有变化)都会使子组件重新 render。所以,为了优化组件性能可以在 getDerivedStateFromProps 方法进行判断是否需要重新 render

当通过 setState() 方法更改 state 值时会触发组件重新 render,通过也可以通过 getDerivedStateFromProps 进行控制优化。

默认情况下,当组件的 stateprops 改变时,组件将重新渲染。如果你的 render 方法依赖于一些其他的数据,你可以告诉 React 组件需要通过调用 forceUpdate 重新渲染。

卸载

这个阶段只有一个方法 componentWillUnmount,在组件卸载前会调用,可以在这个方法里做一些清理工作。比如定时器,或者在 componentDidMount 方法里手动创建的 DOM,避免造成内存泄露。

注意

  • getDerivedStateFromProps 为静态方法,声明时需要带上 static
  • getDerivedStateFromProps 内部 this 为 undefined,属于静态方法调用问题
  • getSnapshotBeforeUpdate 被调用于 render 之后,可以读取但无法使用 DOM的时候。

感谢各路大神整理的内容,此文章参考了些理解。

标签: React

评论已关闭