0

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

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

任何关于如何解决这个问题的提示都非常感谢！提前谢谢了！

4

1 回答 1

2

移出. Row_ App当一个组件重新渲染它的所有变量时，它的所有变量都被重新声明，这意味着新的值，除非它们被相关的钩子记住，例如useMemo，useCallback. Row您在每次渲染中都获得了新的价值。

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

于 2021-10-07T20:55:42.030 回答