代码之家 › 专栏 › 技术社区 › Ren Jitsm

React useeffect显示组件安装2次

use-effect components reactjs

Ren Jitsm · 技术社区 · 2 年前

我有一个名为“Home”的组件,里面有一个useEffect,它有一个控制台。日志(“主组件安装”)。我刚用了一个常用的效果挂钩。但当我最初呈现页面时,我得到了控制台日志两次,而不是在组件的初始安装中显示它。谁能告诉我我的代码怎么了。代码如下:

import React, { useEffect } from 'react';

const Home = () => {

  useEffect(()=>{
    console.log("Home component mounted")
  })

 return (
  <div className="container">
    <h1 className="h1">Home Page</h1>
  </div>
 )};

export default Home;

3 回复 | 直到 2 年前

yanir midler 2 年前

这是因为你的应用程序处于严格模式。转到索引。js和注释严格模式标签。你会发现一个单一的渲染。

这是React的一个故意特征。严格模式。它只在开发模式下发生,应该有助于在渲染阶段发现意外的副作用。

或者你可以尝试使用这个钩子: useLayoutEffect

import React, { useLayoutEffect } from "react";

const Home = () => {
  useLayoutEffect(() => {
    console.log("Home component mounted");
  }, []);

  return (
    <div className="container">
      <h1 className="h1">Home Page</h1>
    </div>
  );
};

export default Home;

user18821127 2 年前

这是因为反应。严格模式

你不必担心——StrictMode只需运行两次效果代码(只在开发期间运行,不必担心生产),就可以捕获bug和内存泄漏等

Neo 2 年前

与componentDidMount()和componentDidUpdate()等效的useEffect()。这意味着在呈现组件时,useEffect()将被调用两次。如果希望只调用一次useEffect(),只需为其添加第二个参数。就像这样。

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

我希望这对你有帮助!

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前