Javascript 为什么useState会导致组件在每次更新时渲染两次？

我这里有一些简单的代码

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [number, setNumber] = useState(0);

  function chaneNumber() {
    setNumber(state => state + 1);
  }

  console.log("here");
  return (
    <div className="App">
      <button onClick={chaneNumber}>Change number</button>
      {number}
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[number，setNumber]=useState（0）；
函数chaneNumber（）{
setNumber（状态=>状态+1）；
}
console.log（“此处”）；
返回(
换号码
{number}
);
}

每次单击该按钮时，控制台中都会出现两条日志，表明该组件渲染了两次。我发现有人说这是关于严格模式的，但我没有启用严格模式。为什么此组件在每次状态更新时渲染两次

---

这里是一个试用链接。

您的应用程序组件在

React.StrictMode

中呈现，这就是导致代码在严格模式下运行的原因。在严格模式下，控制台显示两次，因为每个功能在开发模式下运行两次

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

ReactDOM.render(
:

严格模式不能自动检测副作用，但它
通过使它们更具确定性，可以帮助您识别它们。
这是通过故意双重调用以下函数来实现的：


类组件构造函数、呈现和shouldComponentUpdate方法
类组件静态getDerivedStateFromProps方法
功能组件体
状态更新程序函数（setState的第一个参数）
传递给useState、UseMoom或useReducer的函数

您的应用程序组件在
React.StrictMode
中呈现，这就是导致您的代码在严格模式下运行的原因。在严格模式下，控制台显示两次，因为每个函数在开发模式下运行两次

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

ReactDOM.render(
:

严格模式不能自动检测副作用，但它
通过使它们更具确定性，可以帮助您识别它们。
这是通过故意双重调用以下函数来实现的：


类组件构造函数、呈现和shouldComponentUpdate方法
类组件静态getDerivedStateFromProps方法
功能组件体
状态更新程序函数（setState的第一个参数）
传递给useState、UseMoom或useReducer的函数

可能是因为React.StrictMode中的应用程序可能是React.StrictMode中的应用程序我从未注意到CRA会自动添加严格模式。我只是花了几个小时试图弄清楚为什么我的组件会被渲染两次…应该先阅读更多关于StrictMode的内容…^ ^我从未注意到CRA会自动添加严格模式我花了几个小时试图弄明白为什么我的组件被渲染了两次…我应该先阅读更多关于StrictMode的内容^_^