当前位置：首页 > news >正文

新手小白 react-useEffect 使用场景

news 来源：原创 2025/6/9 3:24:09

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` 的注意事项

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