在 React Native（简称 RN）中，useEffect 是一个 React 的 Hook，用于在函数组件中处理副作用（side effects），比如：
• 发起网络请求
• 订阅或解绑事件
• 更新 DOM（React Native 中是原生视图）
• 设置定时器等
📌 基本语法：

import React, { useEffect } from 'react';

useEffect(() => {
  // 副作用逻辑

  return () => {
    // 可选的清理逻辑（组件卸载或依赖更新时调用）
  };
}, [依赖项数组]);

✅ 示例 1：组件加载时执行一次

useEffect(() => {
  console.log('组件挂载完成');

  return () => {
    console.log('组件卸载');
  };
}, []); // 空数组 => 只在挂载和卸载时触发

✅ 示例 2：监听某个变量的变化

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(`count 变化为：${count}`);
}, [count]); // count 变化时触发

✅ 示例 3：处理计时器 + 清理

useEffect(() => {
  const timer = setInterval(() => {
    console.log('每秒执行一次');
  }, 1000);

  return () => {
    clearInterval(timer); // 组件卸载时清除定时器
  };
}, []);

⚠️ 注意事项
• 不要把 useEffect 放在条件语句里，必须在组件的顶层调用。
• 如果依赖项写错（比如遗漏某个 state/prop），可能导致副作用逻辑执行时机异常。
• 清理函数（return () => {...}）对于取消监听、清除定时器等是非常重要的。

问：

他是不是生命周期的体现？

答：

是的，useEffect 可以看作是 函数组件中“生命周期”的体现，相当于在类组件中常见的生命周期方法的集合体。
✅ 类组件 vs 函数组件生命周期对照：

✅ 类组件 vs 函数组件生命周期对照：

老版本

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('挂载完成');
  }

  componentDidUpdate(prevProps) {
    if (this.props.count !== prevProps.count) {
      console.log('count 更新了');
    }
  }

  componentWillUnmount() {
    console.log('组件卸载');
  }

  render() {
    return <Text>Hello</Text>;
  }
}

等价于 🟰🟰🟰🟰🟰

新版本

import React, { useEffect } from 'react';

function MyComponent({ count }) {
  // 相当于 componentDidMount
  useEffect(() => {
    console.log('挂载完成');

    return () => {
      console.log('组件卸载'); // 相当于 componentWillUnmount
    };
  }, []);

  // 相当于 componentDidUpdate（count）
  useEffect(() => {
    console.log('count 更新了');
  }, [count]);

  return <Text>Hello</Text>;
}