1 分钟带你入门 React 生命周期
前言：给你一个问题，在 React 中父组件执行了 render 函数，那么它的子孙组件会执行哪些钩子函数，如果不了解的话，就来看看这个篇文章吧。
预热:React 生命周期
如果对生命周期不太了解的可以先看看这个:
在 React16 采用 fiber 架构之后，React 的声明周期可以分成三个阶段；分别是 Render phase（渲染阶段）-->Pre-commit phase（预提交）-->Commit phase（提交阶段）；只有在 commit 阶段 React 允许我们使用一些副作用的函数，比如请求后代数据，操作 DOM，定时器等；而其他阶段，React 的渲染可能被打断而重新绘制，所以一定要使用纯函数。
React声明周期示意图
...class Parent extends React.Component { ... render() { return <> <Child /> </> }}
class Child extends React.Component { ... render() { return <> <GrandChild /> </> }}
class GrandChild extends React.Component { ... }
复制代码
Mount 过程
// console.log ....
LifeCycleDemo2.jsx:137 Parent constructorLifeCycleDemo2.jsx:135 Parent componentWillMountLifeCycleDemo2.jsx:135 Parent renderLifeCycleDemo2.jsx:137 Child constructorLifeCycleDemo2.jsx:135 Child componentWillMountLifeCycleDemo2.jsx:135 Child renderLifeCycleDemo2.jsx:137 GrandChild constructorLifeCycleDemo2.jsx:135 GrandChild componentWillMountLifeCycleDemo2.jsx:135 GrandChild renderLifeCycleDemo2.jsx:135 GrandChild componentDidMountLifeCycleDemo2.jsx:135 Child componentDidMountLifeCycleDemo2.jsx:135 Parent componentDidMount
复制代码
Update 过程
// console.log ....
LifeCycleDemo2.jsx:135 Parent shouldComponentUpdateLifeCycleDemo2.jsx:135 Parent componentWillUpdateLifeCycleDemo2.jsx:135 Parent renderLifeCycleDemo2.jsx:135 Child componentWillReceivePropsLifeCycleDemo2.jsx:135 Child shouldComponentUpdateLifeCycleDemo2.jsx:135 Child componentWillUpdateLifeCycleDemo2.jsx:135 Child renderLifeCycleDemo2.jsx:135 GrandChild componentWillReceivePropsLifeCycleDemo2.jsx:135 GrandChild shouldComponentUpdateLifeCycleDemo2.jsx:135 GrandChild componentWillUpdateLifeCycleDemo2.jsx:135 GrandChild renderLifeCycleDemo2.jsx:135 GrandChild componentDidUpdateLifeCycleDemo2.jsx:135 Child componentDidUpdateLifeCycleDemo2.jsx:135 Parent componentDidUpdate
复制代码
Unmount 过程
// console.log ....
LifeCycleDemo2.jsx:135 Parent shouldComponentUpdateLifeCycleDemo2.jsx:135 Parent componentWillUpdateLifeCycleDemo2.jsx:135 Parent renderLifeCycleDemo2.jsx:135 Child componentWillUnmountLifeCycleDemo2.jsx:135 GrandChild componentWillUnmountLifeCycleDemo2.jsx:135 Parent componentDidUpdate
复制代码
小结
通过以上的结果，我们可以发现这么一个规律
发布于: 2020 年 10 月 26 日阅读数: 59
评论