React 钩子在每个渲染上重新添加事件侦听器(详尽错误)

Question

我正在传递一个函数作为道具，并在useEffect中调用该函数以触发重新渲染，然后在每次渲染上重新添加新的事件侦听器。

如果我从依赖项列表中删除incrementCount并将其保留为空数组[]，我会得到react-hooks/exhaustive-deps linting 错误，但是，它在初始渲染后不会触发。

function useApp({ incrementCount, count }) {
  console.log(count);
  // this gets triggered on every render
  useEffect(() => {
    console.log('add event listener');
    window.addEventListener('click', incrementCount);
    return () => {
      window.removeEventListener('click', incrementCount);
    };
  }, [incrementCount]);
}
function App() {
  const [count, setCount] = useState(0);
  function incrementCount() {
    console.log('increment');
    setCount(prevCount => prevCount + 1);
  }
  useApp({ incrementCount, count });
  return <div>click</div>;
}

Answer 1

我认为你可以使用来自 react hook 的 useCallback APIhttps://reactjs.org/docs/hooks-reference.html#usecallback

function App() {
  const [count, setCount] = useState(0);
  const incrementCount = useCallback(() => {
    console.log('increment');
    setCount(prevCount => prevCount + 1);
  }, [])
  useApp({ incrementCount, count });
  return <div>click</div>;
}