javascript - 渲染许多元素时 react 很慢

Question

组件 Cell有状态alive这可以是真的也可以是假的。
如果 alive则为真Cell呈现为 div与类alive (想想康威的 Game of Life )。状态alive每秒更新:

function Cell(props) {
  const [alive, setAlive] = useState(
    Math.random() < props.aliveProbability / 100
  );

  useEffect(() => {
    const interval = setInterval(
      () => setAlive(Math.random() < props.aliveProbability / 100),
      1000
    );
    return () => clearInterval(interval);
  }, []);

  return (
    <div className={"cell " + (alive ? "alive" : "")}>{props.children}</div>
  );
}

使用单个单元格可以正常工作。但是当向网格中添加多个单元组件时，渲染速度会变慢，并且是按顺序而不是同时发生的。细胞越多，它变得越慢。如何解决？
A working demo can be seen here .

Answer 1

缓慢的原因是因为每个单元格在稍微不同的时间触发了自己的新渲染，因为每个 setInterval回调被单独调用。
lift up the state 不是每个单元格都有一个间隔到父组件，对整个数据集进行一次间隔和更新，然后用结果数据渲染实际树一次。 React 将负责优化 DOM 更改!
这是一个使用单个单元格数组的简化示例。

// Simple "dumb" cell component
function Cell({ alive, children }) {
  return <div className={"cell " + (alive ? "alive" : "")}>{children}</div>;
}

// The app manages the update cycle
function App() {
  // Initial dataset
  const [cells, setCells] = useState([
    { alive: true, aliveProbability: 0.9 },
    { alive: true, aliveProbability: 0.9 },
    { alive: true, aliveProbability: 0.9 },
  ]);

  useEffect(() => {
    const interval = setInterval(
      () =>
        setCells((cells) =>
          // update the whole dataset once every interval
          cells.map(({ aliveProbability }) => ({
            alive: Math.random() < aliveProbability / 100,
            aliveProbability,
          }))
        ),
      1000
    );
    return () => clearInterval(interval);
  }, []);

  // Render the whole dataset once.
  return <div>{cells.map(cellProps => <Cell {...cellProps} />)}</div>;
}

现在，不再是数千个单独的渲染，而是每秒只有一次更新和渲染。
就像在游戏引擎中一样，现在只有一个游戏循环，而不是数千个游戏循环!

如果您想深入研究使用 React 进行游戏开发，那么已经有很好的例子:

Replay: A cross-platform JS game engine inspired by React

How to code the “Game of Life” with React in under an hour

react-game-kit