React 的 useEffect 依赖数组中的 Setstate

Question

在 useEffect 的依赖数组中定义 setState 值背后的想法是什么：

const [someState, setSomeState] = useState();
...
useEffect(() => {
  // Do something
  setSomeState('some value');
}, [setSomeState]);

React Hook useEffect has a missing dependency: 'setSomeState'.
Either include it or remove the dependency array.
eslint(react-hooks/exhaustive-deps)

不确定这个例子是否会导致 eslint 要求setSomeState在依赖数组中定义，但我在使用 useEffect 编写时看到了这种时刻。在这种情况下，React 在听什么？我的理解是useEffect监听依赖数组中值的变化，但会setSomeState发生变化吗？我在这里缺少什么？

Answer 1

在这种情况下，不，useStatesetter 函数永远不会改变，但useEffect不知道它是来自另一个钩子的函数，它只是看到一个函数。

考虑这个用例：

const MyComponent = ({ onUpdate }) => {
  const [state, setState] = useState();
  useEffect(() => {
    // state updated, call onUpdate callback with state
    onUpdate(state);
  }, [onUpdate, state]);
  return ...
}

现在父组件可以，给定

<MyComponent onUpdate={onUpdateHandler} />

定义onUpdateHandler为

let onUpdateHandler = console.log;

然后稍后在仍然安装的情况下更改它

onUpdateHandler = state => dispatch({ type: 'SAVE_STATE', state });

通过将回调放在依赖数组中，效果钩子会看到已onUpdate更改的值并再次触发效果。如果它不包括回调，那么它将继续 console.log 状态更新，而不是现在以不同的方式处理它。

值改变的可能性比函数改变的可能性大，但函数值可以改变。您可能有一个 eslinter 建议您将钩子中使用的所有变量添加到依赖项数组，这在大多数情况下是正确的做法。例如，当您希望通过指定一个空数组仅在组件挂载时计算效果，或者不包括一些变量，这些变量是您知道在组件生命周期中永远不会改变的函数，并且在这些情况下您可以使用eslint-disable-next-line react-hooks/exhaustive-deps覆盖将其取消标记为警告。但是请注意，因为这将禁用 linting 检查，因此如果不注意，错误可能会蔓延。