react进阶——生命周期2

149 阅读3分钟

菜鸡的react学习之路

react生命周期——官网线上版

可以点此查看react的生命周期projects.wojtekmaj.pl/react-lifec…

image.png

React 生命周期(旧)

image.png

react旧版生命周期包含三个过程:

1、挂载过程

  • constructor()
  • componentWillMount()
  • componentDidMount()

2、更新过程

  • componentWillReceiveProps(nextProps)
  • shouldComponentUpdate(nextProps,nextState)
  • componentWillUpdate (nextProps,nextState)
  • render()
  • componentDidUpdate(prevProps,prevState)

3、卸载过程

componentWillUnmount()

其具体作用分别为:

  • 1、constructor() 完成了React数据的初始化。

  • 2、componentWillMount() 组件已经完成初始化数据,但是还未渲染DOM时执行的逻辑,主要用于服务端渲染。

  • 3、componentDidMount() 组件第一次渲染完成时执行的逻辑,此时DOM节点已经生成了。

  • 4、componentWillReceiveProps(nextProps) 接收父组件新的props时,重新渲染组件执行的逻辑。

  • 5、shouldComponentUpdate(nextProps, nextState) 在setState以后,state发生变化,组件会进入重新渲染的流程时执行的逻辑。在这个生命周期中return false可以阻止组件的更新,主要用于性能优化。

  • 6、componentWillUpdate(nextProps, nextState) shouldComponentUpdate返回true以后,组件进入重新渲染的流程时执行的逻辑。

  • 7、render() 页面渲染执行的逻辑,render函数把jsx编译为函数并生成虚拟dom,然后通过其diff算法比较更新前后的新旧DOM树,并渲染更改后的节点。

  • 8、componentDidUpdate(prevProps, prevState) 重新渲染后执行的逻辑。

  • 9、componentWillUnmount() 组件的卸载前执行的逻辑,比如进行“清除组件中所有的setTimeout、setInterval等计时器”或“移除所有组件中的监听器removeEventListener”等操作。

React生命周期(新)

image.png

react16.4后使用了新的生命周期,使用getDerivedStateFromProps代替了旧的componentWillReceivePropscomponentWillMount。使用getSnapshotBeforeUpdate代替了旧的componentWillUpdate

使用getDerivedStateFromProps(nextProps, prevState)的原因

使用getDerivedStateFromProps(nextProps, prevState)的原因: 旧的React中componentWillReceiveProps方法是用来判断前后两个 props 是否相同,如果不同,则将新的 props 更新到相应的 state 上去。在这个过程中我们实际上是可以访问到当前props的,这样我们可能会对this.props做一些奇奇怪怪的操作,很可能会破坏 state 数据的单一数据源,导致组件状态变得不可预测。

而在 getDerivedStateFromProps 中禁止了组件去访问 this.props,强制让开发者去比较 nextProps 与 prevState 中的值,以确保当开发者用到 getDerivedStateFromProps 这个生命周期函数时,就是在根据当前的 props 来更新组件的 state,而不是去访问this.props并做其他一些让组件自身状态变得更加不可预测的事情。

使用getSnapshotBeforeUpdate(prevProps, prevState)的原因: 在 React 开启异步渲染模式后,在执行函数时读到的 DOM 元素状态并不总是渲染时相同,这就导致在 componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的,因为这时的值很有可能已经失效了。

getSnapshotBeforeUpdate 会在 render 之后被调用,也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与componentDidUpdate 中一致的。

参考

segmentfault.com/a/119000001…

www.cnblogs.com/onesea/p/12…

blog.csdn.net/u011215669/…

www.jianshu.com/p/b331d0e4b…