reactjs - 将箭头函数传递给使用钩子(Hook)的组件会导致 useEffect 再次触发

Question

如何将箭头函数作为 prop 传递给使用 hooks 的组件，而不导致 useEffect 在不应该触发时触发？

Codesandbox

function Apple(props) {
  const { text, cb } = props;
  useEffect(() => {
    pretendFetch().then(result => cb(result));
    // eslint-plugin-react-hooks dictates that `cb` should be within the dependencies array
  }, [cb]);
  return <div>{text}</div>;
}

当组件传递一个箭头函数作为 cb 时，它将在每次渲染时触发 useEffect。理想情况下，它应该只使用回调一次，但我不能只将 [] 作为依赖项数组传递，而不发出警告。我读过 useRef 可用于包装回调，但这似乎是解决此问题的一个令人不满意的创可贴。

Answer 1

此处的问题是，回调函数会在每次渲染时重新创建，因此会触发 useEffect 中的更新。您可以通过使用 useCallback Hook 将回调函数包装在覆盖组件中来更改此行为，就像我在 CodeSandbox 中所做的那样