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

vatpfxk5  于 12个月前  发布在  Java
关注(0)|答案(2)|浏览(129)

我正在学习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;

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

8ftvxx2r

8ftvxx2r1#

React严格模式导致

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

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

解决方案

在开发时(严格模式)不要担心它,因为一切都按预期执行

raogr8fs

raogr8fs2#

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

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

字符串

相关问题