React: 使用 useState 调用意外的函数组件

您要请求功能还是报告错误？

题

目前的行为是什么？

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Child() {
  console.log("Child render");
  return null;
}

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

  console.log("Render");

  useEffect(() => {
    console.log("count changed", count);
  }, [count]);

  return (
    <div>
      <h2>UseState</h2>
      <p>clicked: {count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          setCount(count);
        }}
      >
        +0
      </button>
      <Child />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

此计数示例中有两个按钮。 单击一个使计数+1，另一个使计数不变。 如果先单击无更改按钮，则不会记录“渲染”。 但是如果先点击+1按钮再点击anthor，“渲染”会显示两次，而“子渲染”只会显示一次。

我在文档中找到了解释。

如果您将 State Hook 更新为与当前状态相同的值，React 将退出而不渲染子项或触发效果。 （React 使用 Object.is 比较算法。）

React 是否只承诺在这种情况下不会渲染 Children 组件？ 当前组件可能仍会被渲染？

这是沙箱中的一个例子。

https://codesandbox.io/s/long-firefly-nz5px?fontsize=14&hidenavigation=1&theme=dark

哪些版本的 React 以及哪些浏览器/操作系统受此问题影响？

“反应”：“^ 16.12.0”，
"react-dom": "^16.12.0",