时间戳

首页 > 解决方案 > 为什么在初始加载之前反应计算渲染两次？

javascript - 为什么在初始加载之前反应计算渲染两次？

问题描述

我的印象是反应渲染计算一次并将其与 DOM 进行比较以进行更改？

但是，从我的简单示例中：https ://codesandbox.io/s/admiring-rain-ej8fu?file=/src/App.js似乎甚至在组件安装之前。渲染函数被执行了两次。我还在下面附上了一个截图来澄清我的观点。在控制台中你可以看到console.log(value)被评估了两次。我想知道我在这里犯了什么概念错误！

代码：

import React, { useState, useEffect } from "react";

function Load() {
  const [value, setValue] = useState("intial Value");

  console.log(value);

  useEffect(() => {
    console.log("mounted");
  }, []);

  return (
    <div>
      <h1>{value}</h1>
      <button onClick={e => setValue(Math.random())}>Update state</button>
    </div>
  );
}

export default Load;

截图： 反应初始重新加载错误

标签： javascriptreactjs

解决方案

这是因为 codesandbox 使用 React Strict Mode。React Strict Mode 是为了更好地调试，因此，在渲染后重新运行所有生命周期方法以确保它们是“安全的”。你可以在这里阅读更多关于它的信息。因此，只需删除 index.js 文件中的 React.StrictMode 标记。

推荐阅读