useEffect

在 React 应用中，useEffect 是一个非常重要的钩子函数，它允许我们在组件渲染完成后执行副作用操作。副作用操作可以包括数据获取、订阅、DOM 操作等。

使用方法

useEffect 是通过传递一个副作用函数和一个依赖数组来使用的。副作用函数定义了我们要在组件渲染完成后执行的操作，依赖数组用于告诉 React 监听哪些变量的变化来触发副作用函数的重新执行。

useEffect(() => {
  // 副作用函数
  // 执行副作用操作
}, [dep1, dep2, ...]);

可以省略依赖数组，这样副作用函数会在每次组件更新后都执行。也可以将依赖数组设为空数组，这样副作用函数仅在组件渲染完成后执行一次。

副作用函数

副作用函数可以包含任何 JavaScript 代码。例如，我们可以通过副作用函数在组件渲染完成后订阅事件、获取数据等。副作用函数也可以返回另一个函数，用于清除副作用，例如取消订阅或清除定时器。

useEffect(() => {
  // 订阅事件
  const subscription = eventEmitter.on(eventName, callback);
  
  // 获取数据
  fetchData().then(data => {
    // 处理数据
  });
  
  // 返回清除副作用的函数
  return () => {
    // 取消订阅
    subscription.unsubscribe();
    // 清除定时器
    clearInterval(timer);
  };
}, [eventName, dep]);

在组件卸载时，React 会自动调用清除副作用的函数。

示例

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

const Timer = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <p>Timer: {time} seconds</p>
    </div>
  );
};

export default Timer;

以上示例中，我们使用 useEffect 创建一个定时器，在组件渲染完成后每秒钟更新一次时间。在组件卸载时，我们清除定时器以避免内存泄漏。

总结

useEffect 使得我们能够在组件渲染完成后执行副作用操作。通过指定依赖数组，可以控制副作用函数的执行时机。副作用函数可以用于订阅事件、获取数据等操作，并且支持在组件卸载时清除副作用。使用 useEffect 可以帮助我们更好地控制组件的生命周期和管理副作用。