React中setCounter触发重渲染但useEffect仅打印一次Hello的原因求解

你对问题的判断是正确的，Hello仅打印一次确实是useEffect的依赖数组规则导致的。

核心原理 #

useEffect的回调函数仅会在以下两种场景执行：

• 组件首次挂载完成后
• 依赖数组中的任意一个依赖项的值/引用和上一次渲染时相比发生了变化

代码执行流程 #

你提供的示例代码逻辑执行步骤如下：

import { useState, useEffect } from "react";

export default function App(props) {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    console.log("Hello");
    setCounter(1);
  }, [props.visible]);
  return <div className="App">{counter}</div>;
}

1. 组件首次挂载：初始化counter为0，渲染完成后执行useEffect回调，打印Hello，调用setCounter(1)更新状态，触发组件重渲染
2. 组件触发重渲染：React会对比本次useEffect的依赖props.visible和上一次的依赖值，如果你没有给App组件传入visible属性，两次的props.visible都是undefined，没有发生变化，因此useEffect回调会被跳过，不会再次打印Hello

扩展说明 #

如果需要useEffect在每次组件渲染后都执行，可以直接删除依赖数组（注意不要传空数组，空数组代表仅挂载时执行一次）。但要注意如果回调内部修改了会触发重渲染的状态，没有终止条件的话会触发无限循环，导致页面卡死。

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