为啥 useState 会导致组件在每次更新时渲染两次?

Posted

技术标签:

【中文标题】为啥 useState 会导致组件在每次更新时渲染两次?【英文标题】:Why does useState cause the component to render twice on each update?为什么 useState 会导致组件在每次更新时渲染两次? 【发布时间】:2020-08-18 01:10:14 【问题描述】:

我这里有一段简单的代码

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 条日志,表明该组件会呈现两次。我发现一个post 说这是关于严格模式的,但我没有启用严格模式。为什么这个组件在每次状态更新时都会渲染两次?

这里有一个codesandbox 链接供您试用。

【问题讨论】:

可能是因为应用在 React.StrictMode 中 【参考方案1】:

您的 App 组件在 React.StrictMode 内呈现,这导致您的代码在严格模式下运行,在严格模式下,控制台显示两次,因为每个函数在开发模式下运行两次

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

根据react docs:

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

类组件构造函数、渲染和 shouldComponentUpdate 方法 类组件静态getDerivedStateFromProps方法 函数组件体 状态更新函数(setState 的第一个参数) 传递给 useState、useMemo 或 useReducer 的函数

【讨论】:

我从来没有注意到CRA会自动添加严格模式。 我花了几个小时试图弄清楚为什么我的组件被渲染了两次...应该先阅读更多关于 StrictMode 的内容...^_^

以上是关于为啥 useState 会导致组件在每次更新时渲染两次?的主要内容,如果未能解决你的问题,请参考以下文章

如何在反应中限制经常重新渲染的组件

React hooks:为啥异步函数中的多个 useState 设置器会导致多次重新渲染?

为啥 useState 不触发重新渲染?

为啥在第一次组件渲染中未定义 useState 对象值?

useState & useReducer

react usestate 重新设置数据后,不渲染页面