基本概念：

useEffect 允许你在函数组件中处理副作用操作，如数据获取、订阅、手动操作 DOM 等。副作用操作是在渲染完成后进行的，因此它不会阻塞浏览器的渲染过程。

使用场景：

1. 数据获取：在组件挂载后从服务器加载数据。

2. 订阅：设置事件监听器或订阅 WebSocket。

3. 清理：在组件卸载时清理副作用（如取消网络请求、移除事件监听器）。

4. 手动 DOM 操作：在渲染后手动操作 DOM。

基本用法：

useEffect(setup, dependencies?)

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 进行副作用操作，例如数据获取
    fetch('<https://api.example.com/data>')
      .then(response => response.json())
      .then(data => setData(data));
    
    // 清理副作用（可选）
    return () => {
      // 取消请求或移除事件监听器
    };
  }, []); // 依赖项数组

  return <div>{data ? data.message : 'Loading...'}</div>;

参数：

• setup: 可以返回一个cleanup函数，当组件被添加到dom的时候，React会执行setup函数。之后当dependencies改变re-render的时候，React会带着oldValue先执行cleanup函数，之后在带着newValue执行setup函数。当组件从DOM移除后，React还会执行cleanup函数。
• dependencies：

返回值：undefined

注意事项：

• 只能在组件顶层执行，如果需要用到条件或循环，可以将抽离一个组件并将要用到的state移到里面
• 如果不需要同步外部的资源（如数据请求），可能不需要使用Effect
• 当Strict Mode开启的时候，React会在真正的setup之前额外执行一次development-only setup+cleanup。
• 如果依赖向里面有在组件内定义的对象或函数，有风险会造成不必要的重复执行Effect。
• 当 useEffect 并不是由用户交互（如点击）触发时，React 通常会在浏览器完成屏幕更新（即渲染）后再运行Effect。如果Effect涉及到视觉操作（比如定位工具提示），而且延迟明显（例如出现闪烁），应该用 useLayoutEffect 替代 useEffect。