React被废弃的三个生命周期函数及替代函数

前言

学习过React的同学应该知道react生命周期函数贯穿于数组的初始化、挂载、更新、销毁的整个过程。可以说配合紧密，但是随着react使用的深入，在业务开发中一些声明的周期函数也会带一些严重的问题，因此官方也很快做出了修正，废弃了几个容易造成严重问题的函数，并且给出来代替的函数。

react精益求精的“弃子”

• 1.componentWillMount
• 2.componentWillUpdate
• 3.componentWillReceiveProps

原因

在componentWillMount进行异步请求，能使数据返回的更快。但，componentWillMount结束后，render会立即被触发，但此时componentWillMount中的异步请求结果可能还未返回。一旦结果返回就会重新render，所以说即使在componentWillMount 就进行了异步请求，在返回数据后又会重新render，这会导致服务端渲染场景下的冗余请求等额外问题。得不偿失，因此在componentDidMount来请求没太大的差别，所以官方将它废除了。
假如你在compoentWillMount中发起了一个付款请求，由于render阶段里的生命周期都可以重复执行，在componentWillMount被打断 + 重启多次后，就会发出多个付款请求。

或者你可能习惯在 componentWillReceiveProps (在已挂载的组件接收到props之前被调用)里操作DOM(比如删除某个符合特征的元素)，那么componentWillReceiveProps 若是执行了两次，你可能就会一口气删掉两个符合特征的元素。

假如在 compoenntWillReceiveProps 和 compoentWillUpdate 里滥用setState 将导致重复渲染死循环。

新生命周期函数

constructor()
static getDerivedStateFromProps(props,state)
shouldComponetUpdate()
render()
componentDidMount()
static getSnapshotBeforeUpdate(prevprops,prevState)
componentDidUpdate()
componentWillUnmount()

挂载前顺序

constructor()
static getDerivedStateFromProps(props,state)
render()

挂载后

componentDidMount()

更新前顺序

static getSnapshotBeforeUpdate(prevprops,prevState)
shouldComponentUpdate()
render()

更新后顺序

static getSnapshotBeforeUpdate(prevprops,prevState)
componentDidMount()

卸载

componetWillUnmount()

现版本废弃的生命周期钩子函数

image.png
文章转自 https://www.jianshu.com/p/13b62e814a04