React useEffect 显示 2 次组件安装

Question

我有一个名为“Home”的组件，我在其中有一个 useEffect，它有一个 console.log（“已安装 Home 组件”）。我只是使用了一个常见的 useEffect 钩子。但是当我最初呈现页面时，我得到控制台日志 2 次，而不是在组件的初始安装中显示它。谁能告诉我我的代码发生了什么。代码如下：

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;

Answer 1

发生这种情况是因为在您的应用程序中处于严格模式。转到 index.js 并注释严格模式标签。你会发现一个单一的渲染。

发生这种情况是 React.StrictMode 的一个特意功能。它只发生在开发模式中，应该有助于发现渲染阶段的意外副作用。

或者你可以尝试使用这个钩子：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;

Answer 2

是因为React.StrictMode

您不必担心 - 只是 StrictMode 会运行您的效果代码两次（仅在开发期间，不必担心生产）以便能够捕获错误和内存泄漏等

阅读更多：https://reactjs.org/docs/strict-mode.html Screenshot here

Answer 3

useEffect() 相当于 componentDidMount() 和 componentDidUpdate()。这意味着当渲染你的组件时，useEffect() 将被调用两次。如果你只想调用 useEffect() 一次，你只需为它添加第二个参数。会变成这样。

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

希望对你有所帮助！

React useEffect 显示 2 次组件安装

React useeffect shows mounting of component in 2 times

components

reactjs

use-effect