📝 React useEffect：副作用处理的瑞士军刀 🎪

绅士玖
148 阅读7分钟

前言

哈喽，各位React玩家！今天我们来聊聊那个让你又爱又恨的useEffect钩子——它就像是React世界里的多啦A梦，什么都能干，但用不好就会变成"多啦A噩梦" 😅

🔍 useEffect是什么？

useEffect是React Hooks中的"副作用处理大师" 🤹‍♂️。在React中，我们把数据获取、订阅、手动DOM操作等称为"副作用"(side effects)，因为它们会影响其他组件，并且不能在渲染期间完成。

官方文档说得好： "useEffect 是一个 React Hook，它允许你将组件与外部系统同步。"  简单说就是：当某些事情发生时，请执行这段代码！useEffect总是在页面完成渲染之后执行。

🛠️ 基本用法

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里写你的副作用代码
    console.log('组件渲染或更新啦！');
    
    return () => {
      // 这里是清理函数（可选）
      console.log('组件要卸载啦，赶紧打扫卫生！');
    };
  }, [/* 依赖数组 */]); 
}

🎯 三种常见使用姿势

  1. 只运行一次（挂载时）  - 空依赖数组

    useEffect(() => {
  console.log('我只在组件挂载时运行一次，像初恋一样难忘~');
}, []);
    • 在页面完成渲染之后执行
    • 可以用来请求数据fetch行为
    • 它只会执行一次，之后就不会执行了

  2. 依赖变化时运行 - 指定依赖项

    useEffect(() => {
  console.log('count变了，我要重新跑一遍！当前值:', count);
}, [count]);
    • 只有相关的依赖发生变化它才会执行，其他情况不变

  3. 每次渲染都运行 - 不提供依赖数组

    useEffect(() => {
  console.log('每次渲染我都要刷存在感！');
});
    • 只要有依赖发生变化，就会执行

💣 常见易错点

  1. 无限循环地狱 🔁

    // 危险！会导致无限循环
useEffect(() => {
  setCount(count + 1);
}, [count]);

    问题解析：

    • 这个 useEffect 的依赖项是 count，意味着每当 count 变化时，useEffect 的回调函数就会执行。
    • 但在回调函数内部，又调用了 setCount(count + 1)，这会直接修改 count 的值，从而触发 useEffect 再次执行。
    • 这样就形成了一个无限循环：count 变化 → useEffect 执行 → setCount 修改 count → count 变化 → ...

    解决方案：

    • 如果目的是初始化或仅在某些条件下更新 count，可以移除 count 的依赖（但需确保逻辑安全）。

    • 或者使用函数式更新（避免直接依赖 count）：

    useEffect(() => {
  setCount(prevCount => prevCount + 1);
}, []); // 依赖为空，仅运行一次

  2. 忘记清理工作 🧹

    useEffect(() => {
  const timer = setInterval(() => {
    // 做一些事情
  }, 1000);
  
  // 别忘了清理！
  return () => clearInterval(timer);
}, []);

    问题解析：

    • 如果 useEffect 中创建了定时器、事件监听器或订阅等副作用，但未在清理函数中销毁它们，会导致：

    • 内存泄漏：组件卸载后，定时器或监听器仍然存在。

    • 意外行为：比如定时器继续触发，但组件已卸载，可能访问到已销毁的状态或 DOM。

    • 清理函数（return () => { ... }）是 useEffect 的可选返回内容，用于在组件卸载或依赖变化时执行清理。

    解决方案：

    • 始终对副作用（如定时器、订阅、事件监听）进行清理。
    • 清理函数应和副作用逻辑对应（如 clearInterval 对应 setInterval）。

  3. async/await直接使用 ⚠️

    // 错误写法！
useEffect(async () => {
  const data = await fetchData();
  setData(data);
}, []);

// 正确写法
useEffect(() => {
  const fetchData = async () => {
    const data = await fetchData();
    setData(data);
  };
  fetchData();
}, []);

    问题解析：

    • useEffect 的回调函数不能直接是 async 函数，因为 async 函数会隐式返回一个 Promise，而 useEffect 的返回值必须是清理函数（或 undefined）。
    • React 会检测到返回的 Promise 并抛出警告，可能导致未预期的行为（如清理逻辑无法执行）。

    解决方案：

    • 在 useEffect 内部定义一个 async 函数并立即调用：

      useEffect(() => {
  const fetchData = async () => {
    const data = await fetchData();
    setData(data);
  };
  fetchData();
}, []);

    • 如果需要处理错误，可以添加 try/catch：

      useEffect(() => {
  const fetchData = async () => {
    try {
      const data = await fetchData();
      setData(data);
    } catch (error) {
      console.error("Fetch failed:", error);
    }
  };
  fetchData();
}, []);

🤔 为什么useEffect有时会挂载两次？

这个问题困扰了很多React新手（甚至一些老手）。你可能会在控制台看到这样的日志：

useEffect(() => {
  console.log('组件挂载啦！'); // 这条日志打印了两次！
}, []);

🕵️‍♂️ 原因解析

  1. React 18的严格模式(Strict Mode)
    在React 18中，开发环境下启用了严格模式的组件会故意挂载两次，目的是帮助开发者发现潜在的问题。这是React团队特意设计的，用来：

    • 检测不纯的渲染（比如直接修改props或state）
    • 检查不正确的副作用清理
    • 提前暴露竞态条件(race conditions)问题

  2. 仅发生在开发环境
    生产环境下不会出现这种双挂载行为，所以不必担心性能问题。

  3. 为什么这是个好设计？
    想象一下：如果你的effect能经受住"挂载→卸载→再挂载"的考验，说明它的清理函数工作正常，代码更健壮！

🔧 应对策略

  1. 正确的数据获取写法
    使用清理函数避免竞态条件：

    useEffect(() => {
  let ignore = false;
  fetchData().then(data => {
    if (!ignore) setData(data);
  });
  return () => { ignore = true; };
}, []);

  2. 使用useRef管理可变值
    对于需要持久化的值：

    const mountedRef = useRef(false);
useEffect(() => {
  if (mountedRef.current) {
    // 跳过第一次执行
    console.log('这不是第一次渲染');
  }
  mountedRef.current = true;
}, [deps]);

  3. 如果实在不想看到两次日志...
    可以临时关闭严格模式（但不推荐）：

    // 移除<React.StrictMode>标签
root.render(<App />);

🧠 底层原理

React通过双挂载机制模拟了以下生命周期：

  1. 首次挂载 → 执行effect
  2. 立即卸载 → 执行清理函数
  3. 再次挂载 → 执行effect

这个过程确保了：

  • 清理函数能正确撤销effect
  • 不会出现"僵尸子组件"(zombie children)问题
  • 帮助发现内存泄漏

💡 设计哲学

React团队认为： "宁愿在开发时痛苦，也不要在生产时崩溃" 。双挂载机制虽然让开发时多了一些麻烦，但能提前发现很多隐蔽的bug，最终让你的应用更稳定。

记住：React的所有"奇怪行为"几乎都是为了帮你写出更好的代码！就像严厉的教练，看似苛刻，实则用心良苦 😉

🎓 面试高频问题&答案

Q1: 为什么不能在useEffect中直接使用async函数？
A1: 因为useEffect期望返回的是一个清理函数或者undefined，而async函数总是返回Promise，React会对你say no 🙅‍♂️

Q2: useEffect和useLayoutEffect有什么区别？
A2: useEffect是异步的，不会阻塞浏览器渲染；useLayoutEffect是同步的，会在浏览器绘制前执行。大多数情况下用useEffect就够了，除非你需要测量DOM。

Q3: 什么时候应该使用useEffect？
A3: 当你需要与React外部系统同步时：数据获取、订阅、手动DOM操作、定时器等。

🚀 进阶技巧

  1. 自定义Hook封装数据获取 🌟

    function useFetchData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      setData(await response.json());
    };
    fetchData();
  }, [url]);
  return data;
}
    • 这个自定义Hook抽象了数据获取逻辑，使组件更专注于UI渲染。通过返回data状态，任何组件都可以简单地通过调用useFetchData(url)来获取数据。

  2. 多个effect分离关注点 ✂️

    // 将不相关的逻辑拆分到不同的effect中
useEffect(() => {
  // 用户数据相关逻辑
}, [user]); // 仅在user变化时执行

useEffect(() => {
  // 窗口大小监听（只需执行一次）
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler);
}, []); // 空依赖数组表示只在挂载/卸载时执行

  3. 性能优化：跳过不必要的effect执行 ⚡

    useEffect(() => {
  // 只有当userId变化且不为null时才执行
  if (userId !== null) {
    fetchUser(userId);
  }
}, [userId]);
    • 这些模式展示了React Hooks的核心优势：逻辑复用、关注点分离和性能优化。通过合理组织effect，可以构建更清晰、更高效的组件结构。

🎁 小贴士

  • 把useEffect想象成React世界和外部世界的桥梁 🌉
  • 每个effect应该只做一件事（单一职责原则）
  • 使用eslint-plugin-react-hooks插件可以帮助你捕捉依赖数组的错误
  • 通过React官网快速更加详细的了解useEffect的使用和技巧

🎬 总结

useEffect就像是一个聪明的管家 🤵，它知道什么时候该干活（依赖变化时），什么时候该休息（依赖没变时），还会在离职前打扫干净（清理函数）。掌握好它，你的React应用就会变得既高效又干净！

记住： "With great power comes great responsibility"  —— 能力越大，责任越大。useEffect很强大，但也要谨慎使用哦！

Happy coding! 🎉

avatar
文章
阅读
粉丝