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

IT技术 javascript reactjs
2021-01-26 02:37:49

我这里有这么简单的代码

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>
  );
}

每次单击按钮时，我都会在控制台中收到 2 个日志，表明该组件呈现两次。我发现一篇帖子说这是关于严格模式的，但我没有启用严格模式。为什么这个组件在每次状态更新时渲染两次？

这是一个可以尝试的代码和框链接。

1个回答

您的 App 组件在React.StrictMode其中呈现导致您的代码在严格模式下运行的原因，在严格模式下控制台显示两次，因为每个功能在开发模式下运行两次

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

根据react文档：

严格模式无法自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意重复调用以下函数来完成的：

  • 类组件构造函数、render 和 shouldComponentUpdate 方法
  • 类组件静态 getDerivedStateFromProps 方法
  • 功能组件体
  • 状态更新器函数（setState 的第一个参数）
  • 传递给 useState、useMemo 或 useReducer 的函数
我只是花了几个小时试图弄清楚为什么我的组件被渲染了两次......应该先阅读更多关于 StrictMode 的信息......^_^
2021-04-02 02:37:49
我从来没有注意到 CRA 会自动添加严格模式。
2021-04-08 02:37:49
其它你可能感兴趣的问题
上一篇JavaScript 中的“未定义 x 1”是什么？ 下一篇为什么 .then() 处的值未定义链接到 Promise？