React生命周期
生命周期是react面试中都会问到的问题 详细的请关注下图 本次讨论是react 16.9
16.4之后新增了两个 删除了三个
总共分成了三个阶段:
1.挂载阶段
2.更新阶段
3.移除阶段
第一个钩子:constructor 老生常谈的一个钩子,因为是class组建肯定是会有构造器的 会在挂载和实例子化的时候执行 里面为什么有super这个问题我们下次讨论复制代码
第二个钩子:新的钩子 getDerivedStateFromProps React生命周期的命名一直都是非常语义化的,这个生命周期的意思就是从props中获取state,可以说是太简单易懂了 可以说,这个生命周期的功能实际上就是将传入的props映射到state上面 里面static关键字是干啥用的我们下次讨论复制代码
由于16.4的修改,这个函数会在`每次re-rendering之前被调用`,这意味着什么呢 意味着即使你的props没有任何变化,而是父state发生了变化,导致子组件发生了re-render,这个生命周期函数依然会被调用,我们做个简单的小实验复制代码
无论count1改变还是count2改变,这个生命周期钩子都会调用 第三个钩子:render 执行render之前会有一个shouldComponentUpdate,但是在源码里面会直接返回true,因为在第一次渲染的时候必定会被update,所以找不到钩子的调用复制代码
第四个钩子: componentDidMount 它之前的配对的 componentWillMount被废弃 componentDidMount是在render钩子结束之后 componentDidMount只会执行一次 至此为止挂载阶段的生命周期钩子结束,下面我们详细了更新阶段 复制代码
============================分割线=================================
那些改变会导致更新呢?
1.props发生改变
2.state发生改变
3.forceupdate
第一个生命周期:getDerivedStateFromProps 这个我们已经讨论过了就略过 第二个生命周期:shouldComponentUpdate 这里删除了一个生命周期 componentWillReciveProps 我认为删除的原因主要是因为这个生命周期钩子太容易造成死循环了 shouldComponentUpdate接收两个参数分别是新的Props(nextProps)和新的state(nextState) 可以进行比对,然后返回true(更新)false(不更新)复制代码
上图返回的是false所以永远不会更新,也不会向下走复制代码
第三个生命周期钩子:getSnapshotBeforeUpdate 这里又废弃了一个生命周期是componentWillUpdate,我觉得也是因为死循环的原因 snapShot的意思是快照 hook调用的时机是在render调用之前,注意这个时候state已经更新 可以看成是代替componentWillUpdate的钩子但是功能更加强大 接收三个参数,preProps,preState 返回的结果会直接带给componentDidupdate复制代码
第四个钩子 componentDidUpdate 老hook了 接收三个参数nextProps nextState snapshot(getSnapshotBeforeUpdate传递过来的) 到此第二个阶段也就是更新阶段的钩子全部讨论完,接下来我们继续讨论卸载的钩子 卸载时唯一一个钩子 componentWillUnmount 在一个组建的生命中只能发生一次复制代码
在卸载之前会被调用复制代码
总结:
新加了:getDerivedStateFromProps getSnapshotBeforeUpdate
废弃了:三个will componentWillReciveProps componentWillMount componentWillUpdate
ps:所有废弃的钩子都被重命名城 UNSAFE_xxxx,控制台会报错,官方不建议使用
作者:jerryFish
链接:https://juejin.cn/post/7026636118946742280