解决 React useEffect 导致的组件无限重渲染问题

问题剖析：React 组件的无限重渲染

在 react 应用开发中，使用 useeffect 钩子来处理副作用（如数据获取、订阅事件等）是常见的模式。然而，不恰当地使用 useeffect 可能会导致组件进入无限重渲染的循环，表现为加载动画持续旋转、页面性能下降等问题。

原始代码中，KeyDrivers 组件面临的问题正是如此：

// ... (组件其他代码)

export default function KeyDrivers() {
    // ... (状态和 Redux 选择器)
    const [featureSet, setFeatureSet] = useState(); // 关键状态
    // ...

    const loadData = async (queryUrl = filters.url) => {
        setIsLoading(true);

        let featureSetId = undefined;
        if (featureSet) {
            featureSetId = featureSet.id;
        } else {
            featureSetId = featureSets[0].id;
        }

        // ... (数据获取逻辑)

        // 问题所在：在 loadData 内部更新了 featureSet 状态
        setFeatureSet({
            label: actionKeyDrivers.payload[0].featureSet.name,
            value: actionKeyDrivers.payload[0].featureSet.name,
            id: actionKeyDrivers.payload[0].featureSet.id
        });
        dispatch(actionKeyDrivers);

        // ... (其他逻辑)
        setIsLoading(false);
    };

    useEffect(() => {
        if (token === undefined) {
            navigate('/login');
        }
        dispatch({ type: 'ROUTE', payload: '/home/key-drivers' });
        loadData();
    }, [featureSet]); // 依赖项中包含了 featureSet

    // ... (其他函数和渲染逻辑)
}

问题的核心在于 useEffect 的依赖数组中包含了 featureSet 状态变量，而 useEffect 内部调用的 loadData 函数又会更新 featureSet。这形成了一个闭环：

1. featureSet 发生变化。
2. useEffect 检测到 featureSet 变化，重新执行。
3. useEffect 调用 loadData。
4. loadData 执行过程中，通过 setFeatureSet 更新了 featureSet。
5. featureSet 再次发生变化，回到第 1 步，循环往复。

这种循环导致组件持续重渲染，无法稳定显示内容。

useEffect 依赖项的原理与重要性

useEffect 钩子的第二个参数是一个依赖数组（dependency array）。它的作用是告诉 React 何时应该重新运行副作用函数。

• 空数组 []: 副作用只在组件挂载时运行一次，在组件卸载时（如果返回了清理函数）运行一次。
• 无依赖数组: 副作用会在每次组件渲染后都运行。
• 包含依赖项的数组 [dep1, dep2]: 副作用会在组件挂载时运行一次，并在数组中的任何依赖项发生变化时重新运行。

理解这一点至关重要。如果依赖数组中的变量在副作用函数内部（或其调用的函数内部）被修改，并且该修改又会触发 useEffect 重新运行，那么就会陷入无限循环。

解决方案：优化 useEffect 依赖

解决无限重渲染的关键在于打破上述循环，即确保 useEffect 的依赖项不会被其自身或其调用的函数在每次执行时更新。

针对本例，featureSet 在 loadData 中被更新，因此不应将其作为 useEffect 的依赖项来触发 loadData。相反，loadData 应该在真正需要重新加载数据时被触发，例如当用户身份信息 (token, username) 或过滤条件 (filters.url) 发生变化时。

以下是修正后的 useEffect 代码：

useEffect(() => {
    // 检查 token 是否存在，如果不存在则导航到登录页
    if (token === undefined) {
        navigate('/login');
    }
    // 派发路由信息
    dispatch({ type: 'ROUTE', payload: '/home/key-drivers' });
    // 调用数据加载函数
    loadData();
}, [token, username, filters.url, dispatch, navigate]); // 修正后的依赖数组

依赖项解释：

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

• token, username, filters.url: 这些是外部变量，当它们发生变化时，确实需要重新获取数据。将它们作为依赖项是合理的。
• dispatch, navigate: 虽然它们通常是稳定的，但作为 useEffect 内部使用的函数，根据 ESLint 的 exhaustive-deps 规则，最佳实践是也将其包含在依赖数组中。React 保证 dispatch 是稳定的，navigate 通常也是。但在某些特定场景下，如果它们被包裹或重新创建，包含它们可以避免潜在的警告或意外行为。

通过这个修改，useEffect 不再依赖于 featureSet。当 loadData 更新 featureSet 时，不会立即触发 useEffect 重新执行，从而避免了无限循环。数据加载将只在 token、username 或 filters.url 发生变化时进行。

React useEffect 使用的最佳实践

为了避免类似的重渲染问题，请遵循以下最佳实践：

1. 精确定义依赖项：只将那些在副作用函数内部使用且在它们变化时需要重新运行副作用的变量放入依赖数组。

2. 避免在 useEffect 内部更新其依赖项：如果一个状态变量是 useEffect 的依赖项，那么避免在 useEffect 的回调函数或其调用的函数内部直接更新这个状态变量，除非你非常清楚你在做什么，并且能够确保不会形成循环。

3. 使用 useCallback 和 useMemo 优化函数和对象：如果你的 useEffect 依赖于一个函数或对象，而这个函数或对象在每次渲染时都会重新创建，那么即使它的逻辑没有改变，也会导致 useEffect 重新运行。使用 useCallback 缓存函数，使用 useMemo 缓存对象，可以避免不必要的副作用执行。

   // 示例：使用 useCallback 优化函数依赖
   const memoizedLoadData = useCallback(async (queryUrl = filters.url) => {
       // ... loadData 逻辑
   }, [token, username, filters.url, setFeatureSet, dispatch, setIsLoading]); // loadData 内部使用的所有外部变量
   
   useEffect(() => {
       // ...
       memoizedLoadData();
   }, [memoizedLoadData, dispatch, navigate]); // 现在依赖 memoizedLoadData

   登录后复制

4. 利用 ESLint 规则 exhaustive-deps：React 团队推荐使用 ESLint 的 eslint-plugin-react-hooks 插件中的 exhaustive-deps 规则。这个规则会检查 useEffect 的依赖数组，并警告你遗漏的依赖项，这有助于发现潜在的 bug 和无限循环。

5. 分离关注点：如果 useEffect 内部逻辑变得复杂，考虑将其拆分为多个更小的 useEffect 钩子，每个钩子处理一个独立的副作用，并拥有更精简的依赖数组。

总结

React useEffect 钩子是处理组件副作用的强大工具，但其依赖数组的管理是避免性能问题和无限重渲染的关键。当组件出现无限重渲染，特别是加载状态反复出现时，应首先检查 useEffect 的依赖数组，并确保没有将会在副作用函数内部被更新的状态变量作为依赖项。通过精确地定义依赖项，并结合 useCallback 等优化手段，可以编写出更稳定、高效的 React 组件。

以上就是解决 React useEffect 导致的组件无限重渲染问题的详细内容，更多请关注php中文网其它相关文章！