React useeffect挂钩

useEffect 是 React 中的一个非常重要的 Hooks API，它允许你在函数组件中执行副作用操作，如数据获取、订阅或手动更改 DOM 等。useEffect 在组件渲染后执行，并且可以根据提供的依赖数组来决定何时重新运行。

基础概念

useEffect 接受两个参数：

回调函数：这个函数将在组件渲染后执行。如果这个函数返回一个清理函数，那么该清理函数将在组件卸载时执行。
依赖数组：一个可选的数组，当数组中的值发生变化时，useEffect 中的回调函数会重新执行。如果数组为空（[]），则 useEffect 只会在组件挂载和卸载时执行。

类型

useEffect 可以分为以下几种类型：

组件挂载时执行一次：不传入依赖数组。
每次渲染后都执行：传入空数组作为依赖。
根据特定依赖变化执行：传入包含相关状态或属性的数组。

应用场景

数据获取：在组件挂载后获取数据。
订阅事件：如监听窗口大小变化或 WebSocket 连接。
手动 DOM 操作：需要直接操作 DOM 的情况。
清除副作用：如取消网络请求或清除定时器。

示例代码

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

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

  useEffect(() => {
    // 组件挂载时执行
    console.log('Component did mount');

    // 数据获取
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // 清理函数，组件卸载时执行
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

  useEffect(() => {
    // 当 data 变化时执行
    console.log('Data has changed:', data);
  }, [data]); // 依赖于 data

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}

export default ExampleComponent;

遇到的问题及解决方法

问题：useEffect 中的数据获取导致组件渲染多次。

原因：每次组件渲染都会触发 useEffect，如果 useEffect 中有异步操作，可能会导致不必要的重复请求。

解决方法：

使用 useCallback 或 useMemo 来缓存函数或值，避免不必要的重新渲染。
确保 useEffect 的依赖数组正确，只包含必要的依赖项。

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

function ExampleComponent({ id }) {
  const [data, setData] = useState(null);

  const fetchData = useCallback(() => {
    fetch(`https://api.example.com/data/${id}`)
      .then(response => response.json())
      .then(data => setData(data));
  }, [id]); // 依赖于 id

  useEffect(() => {
    fetchData();
  }, [fetchData]); // 依赖于 fetchData 函数

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}

export default ExampleComponent;

通过这种方式，可以确保只有在 id 变化时才会重新获取数据，避免了不必要的重复请求。