为什么react-window会在每个useState事件上重新渲染列表？

Question

我不明白为什么react-window会在每个（所有）useState事件上重新渲染列表，这些值甚至没有连接到列表本身。有人可以解释一下这是如何内部链接的以及我如何避免这些重新渲染吗？

import React, { useState  } from "react";
import { FixedSizeList, areEqual } from "react-window";

function App() {

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

  const handleOnClick = () => {
    console.log("PUSHED ME");
    setCount(count+1) // why does it trigger a re-render of FixedSizeList ?
  }

  const Row = React.memo(props => {
    const { index, style } = props;
    return <div style={style}>Row {index}</div>;
  }, areEqual);

  return (
    <div className="App">
      <FixedSizeList
        height={200}
        itemCount={100}
        itemSize={50}
        width={'100%'}
      >
        {Row}
      </FixedSizeList>
   
      <div onClick={handleOnClick}>Push Me</div>
    </div>
  );
}

export default App;

我还尝试使用第二个react-window areEqual参数，但没有帮助。https://react-window.vercel.app/#/api/areEqual

任何有关如何解决此问题的提示都将受到高度赞赏！提前谢谢了！

Answer 1

移至Row之外App。当组件重新渲染时，它的所有变量都被重新声明，这意味着新值，除非它们已被相关钩子记住，例如useMemo, useCallback。Row每次渲染您都会获得新的值。

React.memo不是一个记忆钩子，它是一个高阶组件，控制何时将新道具传递给指定组件。它应该在 React 渲染周期之外声明（所有组件也应该如此）才能正确运行。