为什么 React 在触发事件时会触发 console.logs 8 次？

Question

我是 React 的新手，我不明白为什么我的应用程序渲染了 2 或 8 次。
我正在使用 window.ethereum 与 MetaMask 交互，并有一个监听器在我更改 MetaMask 中的一个帐户时触发。这应该每次只触发 console.logs 一次，但它们被触发了 8 次。如果我删除 useEffect 它们会被触发 2 次。所有应用中均无其他 useEffects。

useEffect((loading) => {
    let isMounted = true;
    setDarkMode(JSON.parse(localStorage.getItem('isDark')));
    setLoading(true);
    loadBloackchainData(isMounted, loading);
    // cleanup
    return () => (isMounted = false);
  }, []);

  const ethereum = window.ethereum
  ethereum.on('accountsChanged', function (accounts) {
    console.log('is metamask installed?', ethereum.isMetaMask);
    console.log('ethereum.networkVersion : ', ethereum.networkVersion );
    console.log('ethereum.selectedAddress : ', ethereum.selectedAddress );
  });

为什么被解雇 8 次？

Answer 1

也许您无意中在每个渲染器上添加了一个新的 accountsChanged 处理程序？
每次渲染时，您可能会添加一个新的处理程序，当帐户信息发生变化时，您的应用程序可能会调用它。你应该 subscribe/unsubscribe 来自 useEffect:

中的那个事件

useEffect(() => {
  const ethereum = window.ethereum  
  const doAccountThings = (accounts) => {
    // do account stuff
  }
  ethereum.on('accountsChanged', doAccountThings)
  return () => {
    // here unsubscribe from the doAccountThings handler,
    // whatever that syntax is.
  }
}, [])

useEffect 文档描述了在订阅后您可能需要使用此技术进行清理的方式和原因：https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

为什么 React 在触发事件时会触发 console.logs 8 次？

Why does React fires console.logs 8 times when an event is triggered?

rendering

event-handling

reactjs