React useeffect显示组件安装两次

Question

我有一个名为“Home”的组件，里面有一个 useEffect，其中有一个 console.log(“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;

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;