React Hook useEffect缺少.missing依赖项：“Score”、“props”和“windowDimension

基础概念

React Hook useEffect 是 React 中用于处理副作用（如数据获取、订阅或手动更改 DOM 等）的 Hook。它允许你在函数组件中执行副作用操作，并且可以选择在组件挂载、更新或卸载时执行这些操作。

类型

useEffect 有两种类型：

组件挂载和卸载时执行：
组件挂载和卸载时执行：
组件挂载、更新和卸载时执行：
组件挂载、更新和卸载时执行：

应用场景

数据获取
订阅外部数据源
手动更改 DOM
清理操作（如取消订阅）

问题原因及解决方法

缺少依赖项：“Score”、“props”和“windowDimension”

当你在 useEffect 中使用了某些变量，但没有将这些变量添加到依赖项数组中时，React 会发出警告，提示你缺少依赖项。这是因为 React 需要知道哪些变量会影响副作用操作的执行。

解决方法

将所有在 useEffect 中使用的变量添加到依赖项数组中。

import React, { useEffect } from 'react';

const MyComponent = (props) => {
    const [score, setScore] = React.useState(0);
    const windowDimension = { width: window.innerWidth, height: window.innerHeight };

    useEffect(() => {
        // 副作用操作
        console.log('Score changed:', score);
        console.log('Props changed:', props);
        console.log('Window dimension changed:', windowDimension);

        // 清理操作
        return () => {
            console.log('Component unmounted');
        };
    }, [score, props, windowDimension]);

    return (
        <div>
            <h1>Score: {score}</h1>
            <button onClick={() => setScore(score + 1)}>Increment Score</button>
        </div>
    );
};

export default MyComponent;