React hooks：如何使用 react-hooks/exhaustive-deps 规则在没有无限循环的情况下读取和更新钩子中的状态

Question

当状态处于钩子中时，它可能会变得陈旧并泄漏内存：

function App() {
  const [greeting, setGreeting] = useState("hello");

  const cb = useCallback(() => {
    alert("greeting is " + greeting);
  }, []);

  return (
    <div className="App">
      <button onClick={() => cb()}>Click me</button>
      <p>
        Click the button above, and now update the greeting by clicking the one
        below:
      </p>
      <button onClick={() => setGreeting("bye")}>
        Update greeting
      </button>
      <p>Greeting is: {greeting}</p>
      <p>
        Now click the first button again and see that the callback still has the
        old state.
      </p>
    </div>
  );
}

演示：https://codesandbox.io/s/react-hook-stale-datamem-leak-demo-9pchk

这样做的问题是，如果我们按照 Facebook 的建议始终列出所有依赖项，并确保我们没有陈旧数据或内存泄漏（如上面的例子）：

const [state, setState] = useState({
  number: 0
});

const fetchRandomNumber = useCallback(async () => {
  if (state.number !== 5) {
    const res = await fetch('randomNumber');
    setState(v => ({ ...v, number: res.number }));
  }
}, [setState, state.number]);

useEffect(() => {
  fetchRandomNumber();
}, [fetchRandomNumber]);

由于 Facebook 说我们应该将 fetchRandomNumber 列为依赖项（react-hooks/exhaustive-deps ESLint 规则），我们必须使用 useCallback 来维护引用，但它在每次调用时重新生成，因为它取决于 state.number 并更新它。

这是一个人为的例子，但我在获取数据时遇到过很多次。在这种情况下是否有解决方法或 Facebook 有问题？

Answer 1

使用状态设置器的函数形式：

const fetchData = useCallback(async () => {
  const res = await fetch(`url?page=${page}`);
  setData((data) => ([...data, ...res.data]));
  setPage((page) => page + 1);
}, [setData, setPage]);

现在您不需要数据和页面作为您的部门

---

您也可以使用 ref 仅在 mount 上运行效果：

  const mounted = useRef(false);

  useEffect(() => {
    if(!mounted.current) {
      fetchSomething();
      mounted.current = true;
    }

    return () => { mounted.current = false }
  }, [fetchSomething]);

还有

const fetchSomething = useCallback(async () => {
  ...
}, [setData, setPage, data, page]);

Answer 2

fetchSomething 不是这里的依赖项。您不想重新触发效果，只在组件安装时触发一次。这就是useEffect(() => ..., []) 的用途。