代码之家 › 专栏 › 技术社区 › 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")},[])

我希望这对你有帮助!

推荐文章

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

Carlos Henrique R. Pereira · 我的API请求有效,但无法访问内容

2 年前

K'man Amuda Jr. · React-Hook useEffect接收到依赖项未知的函数。传递内联函数,而不是1个警告

2 年前

Ivana Murray · react app中的地理代码未更新地图react

2 年前

Foobar · 如果我没有在useEffect数组中包含依赖项,那么它在闭包中会过时吗?

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Ben Fisher · 复选框状态未即时更新

2 年前

Quatban Taco · 在React控制的输入上只听一次更改

2 年前

Ren Jitsm · React useeffect显示组件安装2次

2 年前

Chris Garsonn · 为什么即使我更改了数据,useEffect仍能工作两次?

2 年前