刺猬的开发笔记之useEffect简单实战

useEffect和useState一样，是React里的一个钩子函数，如果你不知道useState是什么，请左转React官方文档状态管理部分，很快我的学习笔记也会增加一个React专栏，虽然useEffect在官方文档的脱围机制里也介绍了，但是既然在系统学习之前开发的时候先遇到了那还是先写一个开发笔记，讲一讲实用的而非理论的，简短的而非冗长的。
useEffect主要用来处理副作用，副作用就是在组件渲染的过程中，可能会对外部环境产生影响的操作，比如与外部世界的交互（如定时器、网络请求）、订阅外部数据源、手动修改 DOM、执行非纯操作（不幂等的操作）等等。
useEffect接受两个参数：一个是副作用函数，另一个是依赖数组，格式如下。

useEffect(() => {
  // 副作用函数
  // 在组件渲染时执行
  // 可以进行副作用操作
}, [依赖数组]);

例如

// 自动关闭逻辑
  useEffect(() => {
    if (visible && onClose) {
      const timer = setTimeout(() => {
        onClose();
      }, autoCloseDelay);

      // 清理定时器
      return () => {
        clearTimeout(timer);
      };
    }
  }, [visible, onClose, autoCloseDelay]);

在上边这个例子中，核心的副作用就是定时器，因为定时器由浏览器环境管理，并且触发时机独立于React渲染周期。React 运行在 JavaScript 主线程，而定时器由浏览器定时器线程管理。
副作用函数用来描述定时器的行为，如只有在visible且onClose的时候才触发定时器，并在组件卸载和依赖项变化时执行清理函数，依赖数组就可以理解为传入给副作用函数的参数。
这里呢我研究了一下副作用函数部分的执行机制是怎么样的，是这个组件其实一直在轮询执行，当轮询到满足visible和onClose的时候才会执行副作用部分的代码还是visible和onClose发生改变的时候通知副作用函数执行呢？
其实这个组件使用的既不是轮询机制，也不是传统的事件通知机制，而是 React 的 “依赖驱动副作用” 机制。
轮询 (Polling)原理：定期检查条件，没有 setInterval 循环，因此不是轮询。
事件通知原理：订阅变化事件，没有事件监听器(addEventListener)，因此不是事件通知。
React 响应式：依赖变化触发副作用，依赖数组驱动执行

// 伪代码展示 React 内部处理
function checkDeps(prevDeps, nextDeps) {
  for (let i = 0; i < prevDeps.length; i++) {
    if (!Object.is(prevDeps[i], nextDeps[i])) {
      return true // 需要执行
    }
  }
  return false // 跳过执行
}

“当依赖项变化且满足条件时执行副作用，否则跳过或清理”
这是 React Hooks 设计哲学的核心体现——声明式副作用管理。