React中如何使用useEffect钩子？-js教程-PHP中文网

useeffect 是 react 中用于处理副作用的 hook，它接受回调函数和依赖项数组两个参数。1. 回调函数在组件渲染后执行，用于处理数据获取、订阅事件等副作用；2. 依赖项数组控制回调执行时机，空数组表示仅首次执行，包含变量则在其变化时执行；3. 可以返回清理函数，在组件卸载或下一次 effect 执行前运行；4. 常见陷阱包括忘记添加依赖项导致闭包问题、添加不必要依赖项影响性能、循环依赖引发无限执行；5. 优化方式包括精确指定依赖项、使用 usecallback 和 usememo 缓存函数与对象、拆分逻辑到自定义 hook 或使用 uselayouteffect 控制执行时机；6. 异步操作需内部定义 async 函数并合理处理错误和清理请求，避免内存泄漏。

React中如何使用useEffect钩子？

理解 useEffect，其实就是理解 React 组件中副作用的处理方式。它允许你在函数组件中执行副作用操作，比如数据获取、订阅事件、手动修改 DOM 等。

解决方案 useEffect 接受两个参数：一个回调函数和一个依赖项数组。

回调函数： 这个函数包含你要执行的副作用逻辑。它会在组件渲染后执行。
依赖项数组： 这个数组告诉 React 何时重新执行回调函数。
- 如果数组为空 []，回调函数只会在组件首次渲染时执行一次。
- 如果数组中包含变量，当这些变量的值发生变化时，回调函数会重新执行。
- 如果省略依赖项数组，回调函数会在每次组件渲染后都执行。（注意：这通常不是你想要的，因为它可能导致性能问题。）

基本用法示例：

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 使用 document 的 title 来更新
    document.title = `You clicked ${count} times`;

    // 可选的清理函数
    return () => {
      // 在组件卸载或下次 effect 执行前运行
      console.log('组件卸载或effect更新');
    };
  }, [count]); // 只有 count 改变时才会重新执行

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example;

一些关键点：

useEffect 在每次渲染之后运行。浏览器已经更新了屏幕。
useEffect 允许你“跳出” React 的纯渲染流程，执行一些会影响组件外部环境的操作。
可以有多个 useEffect 钩子在一个组件中。这允许你将不同的副作用逻辑分离到不同的 effect 中，提高代码的可读性和可维护性。
useEffect 默认返回一个清理函数，用于在组件卸载或 effect 重新执行之前清理副作用。例如，取消订阅、清除定时器等。不返回清理函数也可以。

useEffect 的依赖项数组有什么常见的陷阱？

最常见的陷阱就是忘记添加依赖项，或者添加了不必要的依赖项。

忘记添加依赖项： 这会导致你的 effect 使用了过时的状态或 props。例如，如果你的 effect 中使用了 count 变量，但你没有将 count 添加到依赖项数组中，那么 effect 将始终使用 count 的初始值，即使 count 已经改变。这会导致意想不到的错误。
添加了不必要的依赖项： 这会导致你的 effect 在不必要的时候重新执行，降低性能。例如，如果你的 effect 中使用了从 props 传递下来的一个对象，但你只需要使用这个对象的一个属性，那么你只需要将这个属性添加到依赖项数组中，而不是整个对象。如果整个对象都添加到依赖项数组中，那么每次父组件重新渲染时，即使这个属性的值没有改变，你的 effect 也会重新执行。
循环依赖： 如果你的 effect 中更新了某个状态，而这个状态又被用作 effect 的依赖项，那么就会导致循环依赖。例如：
```
const [value, setValue] = useState(0);

useEffect(() => {
  setValue(value + 1); // 每次渲染都更新 value
}, [value]); // value 是依赖项，导致 effect 无限循环执行
```
这会导致组件无限循环渲染，最终导致浏览器崩溃。要避免循环依赖，你需要仔细分析你的代码，找到导致循环依赖的原因，并采取措施解决它。常见的解决方法包括使用 useCallback 或 useMemo 来缓存函数或值，或者使用 useRef 来存储不需要触发重新渲染的值。

如何优化 useEffect 的性能？

优化 useEffect 的性能主要围绕着控制 effect 的执行时机和减少不必要的重新执行。

React Wrap

React UI？—— JavaScript？

下载

精确的依赖项数组： 这是最重要的一点。只添加 effect 真正依赖的状态或 props。避免添加不必要的依赖项，可以防止 effect 在不必要的时候重新执行。

使用 useCallback 和 useMemo： 如果你的 effect 依赖于一个函数或对象，而这个函数或对象是在每次渲染时都重新创建的，那么即使函数或对象的内容没有改变，effect 也会重新执行。使用 useCallback 可以缓存函数，useMemo 可以缓存计算结果。

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

function MyComponent({ data }) {
  const [count, setCount] = useState(0);

  // 使用 useCallback 缓存 handleData 函数
  const handleData = useCallback(() => {
    console.log('处理数据', data);
  }, [data]); // 只有 data 改变时才重新创建 handleData

  useEffect(() => {
    handleData(); // 在 effect 中调用 handleData
  }, [handleData]); // 依赖于 handleData

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{()"> setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

函数式更新： 如果你的 effect 中需要更新状态，并且新的状态依赖于之前的状态，那么使用函数式更新可以避免使用过时的状态。

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

useEffect(() => {
  // 使用函数式更新，避免使用过时的 count 值
  setCount(prevCount => prevCount + 1);
}, []); // 只在组件首次渲染时执行

将复杂的逻辑拆分到自定义 Hook 中： 如果你的 effect 逻辑比较复杂，可以将其拆分到自定义 Hook 中。这样可以提高代码的可读性和可维护性，并且可以更容易地复用 effect 逻辑。
使用 useLayoutEffect： useLayoutEffect 与 useEffect 类似，但它是在浏览器完成布局和绘制之前同步执行的。这意味着 useLayoutEffect 可以访问到最新的 DOM 布局信息。但是，useLayoutEffect 会阻塞浏览器的渲染，因此应该谨慎使用。只有在需要在 DOM 更新后立即执行某些操作，并且这些操作会影响 DOM 布局的情况下，才应该使用 useLayoutEffect。通常情况下，useEffect 已经足够满足需求。

useEffect 如何处理异步操作？

在 useEffect 中处理异步操作，最常见的就是数据获取。你需要在 effect 中使用 async/await 或者 Promise 来处理异步操作。

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

function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // 可选的清理函数，例如取消未完成的请求
    return () => {
      // 在这里可以取消请求，例如使用 AbortController
    };
  }, []); // 空依赖项数组，只在组件首次渲染时执行

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <p>Data: {JSON.stringify(data)}</p>
    </div>
  );
}

export default MyComponent;

一些注意事项：

避免直接在 useEffect 回调函数中使用 async： useEffect 的回调函数不应该返回 Promise。如果你需要在 effect 中使用 async/await，你需要定义一个内部的 async 函数，并在 effect 中调用它。
处理错误： 在异步操作中，一定要处理错误。可以使用 try/catch 语句来捕获错误，并更新状态来显示错误信息。
清理函数： 如果你的异步操作可能会在组件卸载后完成，那么你需要使用清理函数来取消未完成的请求。例如，可以使用 AbortController 来取消 fetch 请求。这可以避免内存泄漏和一些潜在的问题。
加载状态： 在数据加载过程中，通常需要显示一个加载状态。可以使用一个状态变量来表示加载状态，并在组件渲染时根据加载状态来显示不同的内容。