为什么useState导致组件在每次更新时呈现两次？

  • Z时代
  • 2024-01-10
  • 分类：问答

我这里有一些简单的代码

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条日志，指示该组件呈现两次。

这是一个codeandbox链接，可以尝试一下。

回答：

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

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

根据react docs：

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

  • 类组件的构造函数，呈现器和shouldComponentUpdate方法

  • 类组件的静态getDerivedStateFromProps方法

  • 功能组件主体

  • 状态更新器功能（setState的第一个参数）

  • 传递给useState，useMemo或useReducer的函数

以上是 为什么useState导致组件在每次更新时呈现两次？ 的全部内容， 来源链接： utcz.com/qa/423330.html

回到顶部