React生命周期

504 阅读3分钟

生命周期是react面试中都会问到的问题 详细的请关注下图 本次讨论是react 16.9

image.png

16.4之后新增了两个 删除了三个 总共分成了三个阶段:
1.挂载阶段
2.更新阶段
3.移除阶段

第一个钩子:constructor
老生常谈的一个钩子,因为是class组建肯定是会有构造器的
会在挂载和实例子化的时候执行
里面为什么有super这个问题我们下次讨论

image.png

第二个钩子:新的钩子
getDerivedStateFromProps
React生命周期的命名一直都是非常语义化的,这个生命周期的意思就是从props中获取state,可以说是太简单易懂了
可以说,这个生命周期的功能实际上就是将传入的props映射到state上面
里面static关键字是干啥用的我们下次讨论

image.png

    由于16.4的修改,这个函数会在`每次re-rendering之前被调用`,这意味着什么呢
意味着即使你的props没有任何变化,而是父state发生了变化,导致子组件发生了re-render,这个生命周期函数依然会被调用,我们做个简单的小实验

image.png

image.png

image.png

无论count1改变还是count2改变,这个生命周期钩子都会调用


第三个钩子:render

执行render之前会有一个shouldComponentUpdate,但是在源码里面会直接返回true,因为在第一次渲染的时候必定会被update,所以找不到钩子的调用

image.png

第四个钩子:
componentDidMount
它之前的配对的
componentWillMount被废弃
componentDidMount是在render钩子结束之后
componentDidMount只会执行一次
至此为止挂载阶段的生命周期钩子结束,下面我们详细了更新阶段 

============================分割线=================================

那些改变会导致更新呢?
1.props发生改变
2.state发生改变
3.forceupdate

第一个生命周期:getDerivedStateFromProps
这个我们已经讨论过了就略过

第二个生命周期:shouldComponentUpdate
这里删除了一个生命周期 componentWillReciveProps
我认为删除的原因主要是因为这个生命周期钩子太容易造成死循环了
shouldComponentUpdate接收两个参数分别是新的Props(nextProps)和新的state(nextState)
可以进行比对,然后返回true(更新)false(不更新)

image.png

上图返回的是false所以永远不会更新,也不会向下走

image.png

第三个生命周期钩子:getSnapshotBeforeUpdate

这里又废弃了一个生命周期是componentWillUpdate,我觉得也是因为死循环的原因
snapShot的意思是快照
hook调用的时机是在render调用之前,注意这个时候state已经更新
可以看成是代替componentWillUpdate的钩子但是功能更加强大

接收三个参数,preProps,preState

返回的结果会直接带给componentDidupdate

image.png

第四个钩子 componentDidUpdate
老hook了
接收三个参数nextProps nextState snapshot(getSnapshotBeforeUpdate传递过来的)
到此第二个阶段也就是更新阶段的钩子全部讨论完,接下来我们继续讨论卸载的钩子

卸载时唯一一个钩子
 componentWillUnmount
在一个组建的生命中只能发生一次

image.png

在卸载之前会被调用



总结:
新加了:getDerivedStateFromProps getSnapshotBeforeUpdate
废弃了:三个will componentWillReciveProps componentWillMount componentWillUpdate

ps:所有废弃的钩子都被重命名城 UNSAFE_xxxx,控制台会报错,官方不建议使用