为什么 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 渲染周期之外声明（所有组件都应该如此）才能正常运行。

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

Why does react-window re-render the list on every useState event?

reactjs

react-window