reactjs - 为什么 React 组件在状态没有改变时只重新渲染一次？

Question

import React, { useState } from "react";

export const App = () => {
  const [state, setState] = useState(0);
  console.log("Render App Render", stateA);

  return (
    <div className="App">
      <button onClick={() => setState(1)}>setState in App Component</button>
    </div>
  );
};

1. 安装时 => “渲染应用渲染 0”
2. 第一次点击按钮 => “RenderApp 渲染 1”
3. 第二次点击按钮 => “渲染应用渲染 1”
4. 第三次或更多点击:无日志!

可以帮我解释一下原因吗？

Answer 1

我能找到的最好的解释是 the following comment from a Facebook developer 。我链接的问题解释了同样的问题，渲染发生两次的原因是:

This is a known quirk due to the implementation details of concurrency in React. We don't cheaply know which of two versions is currently committed. When this ambiguity happens we have to over render once and after that we know that both versions are the same and it doesn't matter.