新手小白 react-useEffect 使用场景

useEffect 是 React 中的一个非常重要的 Hook，用于处理组件的副作用（side effects）。它通常在以下几种场景中使用：

1. 数据获取

• 当组件加载时，需要从外部 API 获取数据，或者从本地存储中读取数据。
• 示例：

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组表示只在组件加载时执行一次
  

2. 订阅和取消订阅

• 当组件需要订阅外部事件（如 WebSocket 消息、浏览器事件等）时，需要在组件加载时订阅，在组件卸载时取消订阅。
• 示例：

  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized');
    };
    window.addEventListener('resize', handleResize);
  
    // 返回一个清理函数
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空依赖数组表示只在组件加载和卸载时执行
  

3. DOM 操作

• 当需要直接操作 DOM 元素时，useEffect 是一个合适的地方。
• 示例：

  useEffect(() => {
    const element = document.getElementById('myElement');
    element.style.color = 'red';
  }, []); // 空依赖数组表示只在组件加载时执行一次
  

4. 设置全局状态或外部状态

• 当需要在组件加载时设置全局状态（如 Redux 的 dispatch）或者外部状态时。
• 示例：

  useEffect(() => {
    dispatch(setUser(user));
  }, [dispatch, user]); // 依赖数组包含 dispatch 和 user，当它们变化时重新执行
  

5. 清理资源

• 当组件需要清理某些资源（如定时器、订阅等）时，useEffect 的返回函数可以用来执行清理操作。
• 示例：

  useEffect(() => {
    const timer = setTimeout(() => {
      console.log('Timer expired');
    }, 1000);
  
    // 清理定时器
    return () => clearTimeout(timer);
  }, []);
  

6. 响应状态变化

• 当需要根据组件内部状态的变化执行某些操作时，可以通过将状态变量添加到依赖数组中来实现。
• 示例：

  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`Count changed to ${count}`);
  }, [count]); // 当 count 变化时重新执行
  

7. 模拟生命周期方法

• 在类组件中，componentDidMount、componentDidUpdate 和 componentWillUnmount 的功能可以通过 useEffect 来实现。
• 示例：

  // componentDidMount
  useEffect(() => {
    console.log('Component mounted');
  }, []);
  
  // componentDidUpdate
  useEffect(() => {
    console.log('Component updated');
  });
  
  // componentWillUnmount
  useEffect(() => {
    return () => {
      console.log('Component will unmount');
    };
  }, []);
  

8. 执行副作用操作

• 任何需要与外部世界交互的操作（如日志记录、修改全局变量等）都可以放在 useEffect 中。
• 示例：

  useEffect(() => {
    console.log('Logging component state');
  });
  

使用 useEffect 的注意事项

1. 依赖数组的正确性：
   • 如果依赖数组为空（[]），useEffect 只会在组件加载时执行一次。
   • 如果依赖数组中有变量，useEffect 会在组件加载时以及依赖变量变化时重新执行。
   • 如果依赖数组省略，useEffect 会在每次组件渲染时都执行，这可能会导致性能问题。
2. 清理副作用：
   • 如果 useEffect 中执行了需要清理的操作（如订阅、定时器等），必须返回一个清理函数。
3. 避免无限循环：
   • 如果 useEffect 中调用了导致状态更新的函数，且依赖数组中包含该状态变量，可能会导致无限循环。需要确保逻辑正确，避免这种情况。

总之，useEffect 是一个非常强大的工具，可以帮助你在函数组件中处理各种副作用操作。