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

Question

我刚刚开始了一个新的 create-react-app 项目，发现 react 渲染了两次组件!我在 package.json 中的 react 版本是 "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其中 double 在开发模式下调用某些方法(而不是在生产中)。