【React Hook】- useEffect

useEffect

useEffect 是 React 中的一个 Hook，用于在函数组件中处理副作用。副作用是指在渲染过程中产生的一些额外的操作，例如数据获取、订阅事件、手动修改 DOM 等。

useEffect 的基本语法如下：

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理逻辑
  };
}, [依赖项]);

其中，第一个参数是一个函数，用于定义副作用逻辑。第二个参数是一个依赖项数组，用于指定副作用函数的依赖项。当依赖项发生变化时，副作用函数会重新执行。

如果依赖项数组为空，则副作用函数只会在组件挂载和卸载时执行一次。如果依赖项数组包含多个依赖项，则只有当这些依赖项发生变化时，副作用函数才会重新执行。

在副作用函数中，可以执行任何副作用操作，例如数据获取、订阅事件、手动修改 DOM 等。如果需要在组件卸载时清理副作用，可以在副作用函数中返回一个清理函数。清理函数会在组件卸载时执行，用于清理副作用。

例如，以下是一个使用 useEffect 的示例，用于在组件挂载时获取数据，并在组件卸载时取消数据获取的订阅：

import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();

    return () => {
      // 取消数据获取的订阅
    };
  }, []);
  
  return (
    <div>
      {data ? <div>{data}</div> : <div>Loading...</div>}
    </div>
  );
}

在上面的示例中，useEffect 的依赖项数组为空，因此副作用函数只会在组件挂载时执行一次。在副作用函数中，我们使用 async/await 语法获取数据，并将结果存储在组件的状态中。在组件卸载时，我们可以在清理函数中取消数据获取的订阅。

需要注意的是，useEffect 的副作用函数会在每次渲染后执行，包括组件更新和组件卸载。因此，如果副作用函数中包含一些副作用操作，例如数据获取、订阅事件等，需要确保这些操作是幂等的，即多次执行不会产生副作用。

另外，useEffect 的清理函数会在组件卸载时执行，但不会在组件更新时执行。因此，如果需要在组件更新时清理副作用，可以在副作用函数中返回一个清理函数，并在清理函数中执行清理操作。

总之，useEffect 是 React 中处理副作用的强大工具，可以帮助我们在函数组件中执行各种副作用操作，并在组件卸载时清理副作用。