Javascript 在每个渲染上重新添加React hooks事件侦听器（彻底的deps错误）

我将传递一个函数作为道具，并在

useffect

中调用该函数，以触发重新渲染，然后在每个渲染上重新添加一个新的事件侦听器

如果我从依赖项列表中删除

incrementCount

，并将其保留为空数组

[]

，我会得到

react hooks/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>;
}

函数useApp（{incrementCount，count}）{
控制台日志（计数）；
//这会在每次渲染时触发
useffect（（）=>{
log（'addeventlistener'）；
window.addEventListener（'click'，incrementCount）；
return（）=>{
window.removeEventListener（'click'，incrementCount）；
};
}，[递增计数]；
}
函数App（）{
const[count，setCount]=useState（0）；
函数递增计数（）{
console.log（'increment'）；
setCount（prevCount=>prevCount+1）；
}
useApp（{incrementCount，count}）；
返回单击；
}

我认为您可以使用react hooks的

useCallback

api

函数应用程序（）{
const[count，setCount]=useState（0）；
const incrementCount=useCallback（（）=>{
console.log（'increment'）；
setCount（prevCount=>prevCount+1）；
}, [])
useApp（{incrementCount，count}）；
返回单击；
}

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    console.log('increment');
    setCount(prevCount => prevCount + 1);
  }, [])

  useApp({ incrementCount, count });

  return <div>click</div>;
}