javascript 为什么react useeffect函数呈现控制台日志两次

vatpfxk5 于 12个月前发布在 Java

关注(0)|答案(2)|浏览(130)

我正在学习react useEffect（）。在这个例子中，“render”在我第一次运行应用程序时被记录了两次。

import { useState, useEffect } from "react";

function MyComponent() {
  const [resourceType, setResourceType] = useState("posts");

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

  return (
    <>
      <div>
        <button onClick={() => setResourceType("posts")}>Posts</button>
        <button onClick={() => setResourceType("users")}>Users</button>
        <button onClick={() => setResourceType("comments")}>Comments</button>
      </div>
      <h1>{resourceType}</h1>
    </>
  );
}

export default MyComponent;

字符串
它应该在应用程序运行时呈现一次。为什么它在控制台日志中打印两次。

JavaScript

来源：https://stackoverflow.com/questions/77744538/why-does-react-useeffect-function-renders-a-console-log-twice

2条答案

按热度按时间

8ftvxx2r1#

React严格模式导致

无需担心 *，这只会发生在严格模式下，不应该发生在生产版本中。这种行为被认为是正常的，特别是在本地主机或开发中。（阅读下文以了解原因）

解释
在React严格模式下，某些生命周期方法，包括渲染和效果，可能会被双重调用以检测副作用。这种行为特定于开发模式，旨在帮助捕获和记录副作用问题。它不应该发生在生产中。
如果仅在开发模式下观察到双重调用，并且应用程序在生产模式下按预期工作，则它可能与严格模式行为有关。

解决方案

在开发时（严格模式）不要担心它，因为一切都按预期执行

赞(0）回复(0）举报 12个月前

raogr8fs2#

因此，当您单击任何按钮（Posts、Users或Comments）时，它将导致状态更改（resourceType更新），触发组件的重新呈现，并导致useEffect再次运行，将“render”记录到控制台。
通过传递一个空的依赖数组（[]），效果将在初始渲染后只运行一次，模仿您描述的行为。

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

字符串

赞(0）回复(0）举报 12个月前

我来回答

javascript 为什么react useeffect函数呈现控制台日志两次

2条答案

React严格模式导致

解决方案

相关问题

热门标签

最新问答