关于useEffect的那些事

前端

2023-10-04 03:32:46

前言

在使用useEffect的过程中，踩到了一些坑，系统的总结整理一下它的使用方法，让我们一起学习吧！

useEffect的介绍

useEffect 是 React 中一个非常重要的函数，它允许我们在函数组件中执行副作用操作，例如更新 DOM、发起 API 请求或设置计时器。

useEffect 函数接受两个参数：一个回调函数和一个依赖项数组。回调函数将在组件挂载后立即执行，并在组件更新时再次执行。依赖项数组是一个数组，它指定了哪些状态或属性的变化会触发回调函数的执行。

useEffect的生命周期

useEffect 函数的生命周期如下：

组件挂载时，useEffect 函数的回调函数将立即执行。
组件更新时，useEffect 函数的回调函数将再次执行，但只有当依赖项数组中有一个或多个状态或属性发生变化时才会执行。
组件卸载时，useEffect 函数的回调函数将执行其 cleanup 函数（如果存在的话）。

如何处理状态管理

useEffect 函数可以用于管理状态。当组件的状态发生变化时，useEffect 函数的回调函数将再次执行。这使得我们可以轻松地更新 DOM 或发起 API 请求，以响应状态的变化。

例如，以下代码使用 useEffect 函数来更新 DOM 中的元素：

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.getElementById('count').innerHTML = count;
  }, [count]);

  return (
    <div>
      <p id="count">{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

当 count 状态发生变化时，useEffect 函数的回调函数将再次执行，并将 count 的值更新到 DOM 中的元素中。

如何处理副作用

useEffect 函数还可以用于处理副作用。副作用是指组件渲染时对组件外部产生影响的操作，例如更新 DOM、发起 API 请求或设置计时器。

例如，以下代码使用 useEffect 函数来发起 API 请求：

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>
  );
};

当组件挂载时，useEffect 函数的回调函数将立即执行，并向 API 发起请求。当 API 请求成功返回时，useEffect 函数的回调函数将再次执行，并将 API 请求的结果存储到 data 状态中。

如何使用依赖项

useEffect 函数的第二个参数是一个依赖项数组。依赖项数组是一个数组，它指定了哪些状态或属性的变化会触发回调函数的执行。

例如，以下代码使用 useEffect 函数来更新 DOM 中的元素，但只有当 count 状态发生变化时才会更新：

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.getElementById('count').innerHTML = count;
  }, [count]);

  return (
    <div>
      <p id="count">{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

当 count 状态发生变化时，useEffect 函数的回调函数将再次执行，并将 count 的值更新到 DOM 中的元素中。但是，当其他状态或属性发生变化时，useEffect 函数的回调函数不会执行。

如何进行条件渲染

useEffect 函数还可以用于进行条件渲染。条件渲染是指根据某个条件来决定是否渲染某些元素。

例如，以下代码使用 useEffect 函数来根据 data 状态的值来决定是否渲染一个元素：

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>
  );
};

当 data 状态为空时，useEffect 函数的回调函数将立即执行，并向 API 发起请求。当 API 请求成功返回时，useEffect 函数的回调函数将再次执行，并将 API 请求的结果存储到 data 状态中。当 data 状态不为空时，useEffect 函数的回调函数不会执行，但组件将渲染出 data.message 的值。

如何进行性能优化

useEffect 函数可以用于进行性能优化。通过合理地使用依赖项数组，我们可以减少 useEffect 函数回调函数的执行次数，从而提高组件的性能。

例如，以下代码使用 useEffect 函数来更新 DOM 中的元素，但只有当 count 状态发生变化时才会更新：

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.getElementById('count').innerHTML = count;
  }, [count]);

  return (
    <div>
      <p id="count">{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};