彻底扫盲 React 中的 useEffect：替代生命周期函数，巧妙处理副作用

2024-02-07 03:42:10

进入 React Hooks 的世界，我们继续探秘 useEffect，这个神奇的函数，可以轻松替代那些我们熟悉的生命周期函数，并巧妙地处理副作用。

初探 useEffect，告别生命周期函数

告别繁琐的生命周期函数，迎面而来的是简洁优雅的 useEffect。它能帮你处理那些在组件生命周期中需要执行的额外操作，如网络请求、数据订阅等，让代码更清晰易读。

useEffect 的本质：副作用的管理者

useEffect 的精髓在于管理副作用。副作用是指组件渲染后需要执行的操作，这些操作会影响组件之外的状态或产生其他非渲染效果。有了 useEffect，我们不再需要在生命周期函数中穿插副作用代码，而是可以集中管理，提升代码的可读性和可维护性。

useEffect 的用法秘籍

用法 1：替代 componentDidMount、componentDidUpdate

不加依赖项的 useEffect 类似于 componentDidMount 和 componentDidUpdate 的结合体，每当组件渲染（componentDidMount）或更新（componentDidUpdate）时都会执行。

useEffect(() => {
  // 副作用代码
});

用法 2：替代 componentDidUnmount

useEffect 返回一个清除函数，类似于 componentWillUnmount，当组件卸载时会执行清除操作。

useEffect(() => {
  return () => {
    // 清除操作
  };
});

用法 3：控制副作用执行时机

通过传递依赖项数组，可以控制 useEffect 何时执行。如果依赖项为空数组，则 useEffect 只在组件初始化时执行一次；如果依赖项有值，则 useEffect 会在依赖项改变时执行。

真实案例：请求数据

举个例子，假设我们想在组件加载时从服务器请求数据：

import { useEffect, useState } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://example.com/api/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
};

export default MyComponent;