https://amatsuzero.github.io/LastStand/tags/react-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/Recent content in React 生命周期 on Last StandHugozh-cnSat, 08 Feb 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/react/react-lifecycle/Tue, 17 Dec 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/react/react-lifecycle/<h2 id="简介">简介</h2> <p>React从v16.3的版本开始， 对生命周期的钩子进行了渐进式的调整，分别废弃和新增了一些生命周期的钩子函数，本文会从以下四点开始讲解：</p> <ol> <li>新旧生命周期函数的对比</li> <li>分析为什么要废弃旧的钩子函数</li> <li>详解新的生命周期使用场景</li> <li>实例代码演示并进行总结</li> </ol> <h2 id="新旧生命周期对比">新旧生命周期对比</h2> <p>一个完整的React组件生命周期会依次调用如下钩子：</p> <h3 id="old-lifecycle">old lifecycle</h3> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/react/react-lifecycle/image-01.webp"></p> <p>挂载</p> <ul> <li>constructor</li> <li>componentWillMount</li> <li>render</li> <li>componentDidMount</li> </ul> <p>更新</p> <ul> <li>componentWillReceiveProps</li> <li>shouldComponentUpdate</li> <li>componentWillUpdate</li> <li>render</li> <li>componentDidUpdate</li> </ul> <p>卸载</p> <ul> <li>componentWillUnmount</li> </ul> <h3 id="new-lifecycle">new lifecycle</h3> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/react/react-lifecycle/image-02.webp"></p> <ul> <li>挂载<br> <ul> <li>constructor</li> <li>getDerivedStateFromProps</li> <li>render</li> <li>componentDidMount</li> </ul> </li> <li>更新<br> <ul> <li>getDerivedStateFromProps</li> <li>shouldComponentUpdate</li> <li>render</li> <li>getSnapshotBeforeUpdate</li> <li>componentDidUpdate</li> </ul> </li> <li>卸载<br> <ul> <li>componentWillUnmount</li> </ul> </li> </ul> <p>从以上生命周期的对比，我们不难看出，React从v16.3开始废弃 <code>componentWillMount</code> <code>componentWillReceiveProps</code> <code>componentWillUpdate</code> 三个钩子函数</p> <h2 id="分析废弃原因">分析废弃原因</h2> <p>Facebook花了两年多的时间搞出了React Fiber, 因为在v15的版本，更新过程是同步的，往往一个主线程长时间被占用，会导致页面性能问题</p> <p>而 <strong>React Fiber的机制:</strong> 利用浏览器 <code>requestIdleCallback</code> 将可中断的任务进行分片处理，每一个小片的运行时间很短，这样唯一的线程就不会被独占</p> <p>需要详细了解可以点下面链接 <a href="https://zhuanlan.zhihu.com/p/26027085">Morgan大佬 - 知乎</a></p> <blockquote> <p>那么React Fiber会对生命周期带来什么影响吗？</p> </blockquote> <p>因为React Fiber <code>Reconciliation</code> 这个过程有可能暂停然后继续执行，所以挂载和更新之前的生命周期钩子就有可能不执行或者多次执行；</p> <p>目前React为这几个生命周期钩子提供了别名，分别是：</p> <ul> <li>UNSAFE_componentWillMount</li> <li>UNSAFE_componentWillReceiveProps</li> <li>UNSAFE_componentWillUpdate</li> </ul> <p>React17将只提供别名，取个别名的目的就是恶心你，不让你使用。</p>