为什么这个组件在 React 中渲染两次？

Question

我有一个组件，我设置了一个计数，并在单击按钮时让状态更新。但是当我检查渲染时间时，每次单击按钮时它都会渲染两次。

https://codesandbox.io/s/brave-forest-yre6y?file=/src/App.js

export default function App() {
  const cute = Array(10).fill({});
  const [count, setCount] = useState(2);
  console.log(count);
  return (
    <div className="App">
      <button
        onClick={() => {
          if (count < 10) setCount(count + 1);
        }}
      >
        add
      </button>
      {cute.map((data, index) => {
        if (index < count) {
          return (
            <div>
              <p>{index}. Luna is cute</p>
            </div>
          );
        }
      })}
    </div>
  );
}

我想知道：

1. 为什么会这样呢？
2. 我怎样才能防止这种情况发生？

Answer 1

您的应用程序正在使用StrictMode. 查看您的index.js文件 - 您的应用程序包含在<React.StrictMode>元素之间。

使用StrictMode将导致您的应用程序渲染两次，但仅限于开发模式。创建应用程序时create-react-app将默认启用严格模式。

这是严格模式的官方文档。

解决方案只是删除<React.StrictMode>，但这也会禁用它的一些优点，所以如果它不打扰你，我会保持原样，因为知道它不会像生产中那样渲染。

有关更多详细信息，请参阅此相关问题：由于严格模式，我的 React 组件正在渲染两次