如何在 React 中正确地使用 useEffect 钩子来监听某个状态变化并仅在该状态变化时执行副作用？

如何在 React 中正确地使用 useEffect 钩子来监听某个状态变化并仅在该状态变化时执行副作用？

回答与解析：
在 React 中，useEffect 钩子接收两个参数：一个副作用函数和一个依赖数组。为了确保副作用仅在特定状态变化时执行，应将该状态变量明确地包含在依赖数组中。

示例：

import { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // 仅当 count 变化时执行
  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]); // 依赖数组中只包含 count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

解析要点：

1. 依赖数组的作用：React 会对比依赖数组中每一项的前后值（使用 Object.is 比较），只有当其中任一值发生变化时，才会重新执行副作用函数。
2. 避免遗漏依赖：如果副作用函数中使用了某个响应式值（如状态或 props），但未将其加入依赖数组，可能导致闭包陷阱（stale closure），即使用的是过时的值。
3. 避免不必要的依赖：若将不相关的状态或对象（如每次渲染都新建的对象）放入依赖数组，可能造成无限循环或性能问题。
4. 使用 ESLint 插件：React 官方推荐使用 eslint-plugin-react-hooks，它能自动检测 useEffect 的依赖是否完整或多余。

因此，正确使用 useEffect 的关键是：副作用函数中用到的所有响应式值都应显式声明在依赖数组中，同时确保这些值本身是稳定或可预测的。