ReactJS回调useEffect挂钩

基础概念

useEffect 是 React 中的一个 Hook，用于处理组件的副作用操作。它允许你在函数组件中执行类似于类组件生命周期方法的操作，如组件挂载、更新和卸载时的逻辑。

类型与应用场景

类型

组件挂载和更新时执行：当组件首次渲染以及每次更新时都会执行。
仅在组件挂载时执行：通过传递空数组作为依赖项，确保副作用仅在组件首次渲染时执行一次。
清理操作：可以在 useEffect 中返回一个函数，该函数会在组件卸载时执行，用于清理副作用。

应用场景

数据获取：在组件加载时从服务器获取数据。
订阅与取消订阅：如监听窗口大小变化或 WebSocket 连接。
手动更改 DOM：如设置焦点或滚动位置。
使用第三方库：初始化或清理第三方库实例。

示例代码

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

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

  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 更新文档标题
    document.title = `You clicked ${count} times`;

    // 如果需要在组件卸载时执行清理操作，返回一个函数
    return () => {
      console.log('Component unmounted');
    };
  }, [count]); // 仅在 count 更改时重新运行 effect

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

遇到的问题及解决方法

问题1：无限循环更新

原因：当 useEffect 中的状态更新函数导致组件重新渲染，并且该 useEffect 的依赖项包含了被更新的状态，就会形成无限循环。

解决方法：确保 useEffect 的依赖项正确，避免将导致更新的状态包含在依赖数组中。

// 错误示例
useEffect(() => {
  setCount(count + 1); // 这将导致无限循环
}, [count]);

// 正确示例
useEffect(() => {
  // 其他逻辑，但不直接更新 count
}, []);

问题2：副作用未执行或执行不正确

原因：可能是由于依赖项设置不当或遗漏了必要的清理操作。

解决方法：仔细检查 useEffect 的依赖数组，确保所有外部变量都被正确包含。如果需要清理操作，确保返回一个清理函数。

useEffect(() => {
  let isMounted = true;
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      if (isMounted) {
        setData(data);
      }
    });

  return () => {
    isMounted = false; // 清理函数，防止组件卸载后设置状态
  };
}, []); // 假设数据不需要在每次渲染时都获取

通过以上方法，可以有效避免 useEffect 在使用过程中遇到的常见问题。