为什么一个简单的 React 组件会渲染两次？

Question

我刚刚启动了一个新的 create-react-app 项目，并注意到 React 渲染组件两次！我在package.json中的反应版本是"react": "^16.13.1"

import React, { useRef } from "react";

const App = () => {
  const renders = useRef(0);
  console.log("renders: ", renders.current++);

  return (
    <div>
      Hello
    </div>
  );
};

这会在第一次渲染时产生：

renders: 0
renders: 0

现在，如果我添加一个按钮来增加状态，每个状态更改还会产生两个额外的渲染：

import React, { useRef } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const renders = useRef(0);
  console.log("renders: ", renders.current++);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>increment</button>
      <div>count: {count}</div>
    </div>
  );
};

这将导致：

//--- initial render
renders: 0
renders: 0
//--- first click
renders: 1
renders: 2
//--- second click
renders: 3
renders: 4
//--- third click
renders: 5
renders: 6

这是正常现象还是最新版本的 React 中的错误？

Answer 1

好吧，看来我找到了原因。经过检查，index.js我发现以下内容：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

看起来 create-react-app 现在包含React.StrictMode在开发模式（而不是生产模式）下双重调用某些方法。