Question

为什么我的组件渲染两次？

export default function App() {
  console.log("asd");
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title count={count} />
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </div>
  );
}


//console= "asd" "asd"

其渲染两次，但是如果我删除useState，则不会发生

Answer 1

您的应用程序可能被React.StrictMode包装。 StrictMode是用于突出显示应用程序中潜在问题的工具。

严格模式目前可帮助：

识别具有不安全生命周期的组件

关于旧式字符串引用API使用情况的警告

有关不建议使用findDOMNode用法的警告

检测出意外的副作用

检测传统上下文API

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

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

类组件的静态getDerivedStateFromProps方法

功能组件主体（您的应用是功能组件）

状态更新程序功能（setState的第一个参数）

传递给useState，useMemo或useReducer的函数

More Detail

用钩子反应渲染两次

1 个答案: