【最佳实践】你肯定不知道的useEffect 钩子的工作原理？知其然不知其所以然

大家好，我是DX3906

        useEffect 是 React 库中用于处理副作用的钩子（Hook）。它允许你在函数组件中执行与 DOM 相关的操作和生命周期函数类似的逻辑。useEffect 钩子的工作原理涉及到 React 的渲染流程和副作用的调度机制。以下是其工作原理的详细说明：
        1、调度副作用：当你在组件内部调用 useEffect 时，你实际上是将一个副作用函数及其依赖项数组排队等待执行。这个函数并不会立即执行。
        2、提交阶段（Commit Phase）：React 渲染组件并且执行了所有的纯函数组件或类组件的渲染方法后，会进入所谓的提交阶段。在这个阶段，React 将计算出的新视图（新的 DOM 节点）更新到屏幕上。一旦这个更新完成，React 就知道现在可以安全地执行副作用函数了，因为这不会影响到正在屏幕上显示的界面。
        3、副作用执行：提交阶段完成后，React 会处理所有排队的副作用。如果组件是首次渲染，所有的副作用都会执行。如果组件是重新渲染，React 会首先对比副作用的依赖项数组：如果依赖项未变，副作用则不会执行；如果依赖项有变化，或者没有提供依赖项数组，副作用会再次执行。
        4、清理机制：如果副作用函数返回了一个函数，那么这个函数将被视为清理函数。在执行当前的副作用之前，以及组件卸载前，React 会先调用上一次渲染中的清理函数。这样确保了不会有内存泄漏，同时能撤销上一次副作用导致的改变。
        5、延迟副作用：尽管 useEffect 会在渲染之后执行，但它是异步执行的，不会阻塞浏览器更新屏幕。这意味着 React 会等待浏览器完成绘制之后，再执行你的副作用函数，以此来确保副作用处理不会导致用户可见的延迟。

下面是一个简单的useEffect钩子的例子：

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    document.title = '页面标题';

    // 可选的清理函数
    return () => {
      document.title = '原始标题';
    };
  }, []); // 空数组表示这个副作用只在组件挂载时执行一次

  return <div>Hello, World!</div>;
}

        通过这种机制，useEffect 允许开发者以一种优化的方式来处理组件中可能存在的副作用，而不需要关心渲染的具体时机。退出清理功能确保了即使组件被多次快速创建和销毁，应用程序也能保持稳定和性能。

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~