传递空数组时useEffect仍触发多组件渲染的React问题

你的代码场景问题根源 #

你当前的App.js里渲染了三个独立的Greet组件实例：

export default function App() {  
    return (
      <>       
        <Greet name="Eric" />   
        <Greet name="Stan" />   
        <Greet name="Butters" /> 
      </>
    )
  }

这不是同一个Greet组件的三次更新，而是三个完全分开的组件实例，每个实例都会经历完整的挂载流程。

空依赖数组的表现为什么不符合预期？ #

当你给useEffect传空依赖数组[]时，它的作用是当前组件实例挂载时执行一次副作用。
因为你代码里的三个Greet是独立实例，每个实例挂载时都会触发自己的useEffect，所以控制台会打印三次Greetings to [name]，而不是只执行第一个。

加入name依赖数组的表现为什么也不符合预期？ #

如果把name加入依赖数组[name]，useEffect会在组件挂载时和**name值变化时**执行。但在你的原代码里，每个Greet实例的name prop是固定不变的（第一个永远是Eric，第二个永远是Stan），所以每个实例的useEffect还是只会执行一次，和空依赖的效果看起来一致。

符合预期的写法（同一个组件更新） #

如果你想实现「同一个Greet组件随着name变化触发副作用」的效果，应该让App维护一个name状态，只渲染一个Greet组件：

修改后的App.js

import { useState } from "react";
import Greet from "./Greet";

export default function App() {
  const [name, setName] = useState("Eric");

  // 模拟name的动态变化
  setTimeout(() => setName("Stan"), 1000);
  setTimeout(() => setName("Butters"), 2000);

  return <Greet name={name} />;
}

修改后的Greet.js

import { useEffect } from "react";

export default function Greet({ name }) {
  const message = `Hello, ${name}!`;

  useEffect(() => {
    console.log(`Greetings to ${name}`);
  }, [name]);

  return <div>{message}</div>;
}

此时控制台会依次打印：
Greetings to Eric（挂载时）、Greetings to Stan（name更新时）、Greetings to Butters（name再次更新时），完全符合依赖数组的预期行为。

内容的提问来源于stack exchange，提问作者Sarah