React Hooks 之 useEffect

什么是useEffect？

useEffect是React提供的一个用于处理副作用的Hook。副作用通常包括那些不直接与组件渲染相关的操作，比如数据获取、订阅、手动DOM操作等。在类组件中，这些操作通常在生命周期方法中执行，如componentDidMount、componentDidUpdate和componentWillUnmount。而在函数式组件中，由于没有这些生命周期方法，useEffect成为了执行这些操作的理想选择。

基本用法

useEffect接受两个参数：一个effect函数和一个依赖数组。effect函数定义了需要在组件渲染后执行的操作，而依赖数组定义了effect函数依赖的变量。当依赖数组中的变量发生变化时，useEffect会重新运行。

下面是一个简单的例子，演示了useEffect的基本用法：

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

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

  useEffect(() => {
    // 在组件挂载时执行
    fetchData();

    // 在组件卸载时执行
    return () => {
      cleanup();
    };
  }, []); // 依赖数组为空，只在组件挂载和卸载时执行

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  const cleanup = () => {
    console.log('Cleanup');
  };

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

export default ExampleComponent;

在这个例子中，useEffect在组件挂载时执行fetchData函数来获取数据，并在组件卸载时执行cleanup函数进行清理。由于依赖数组为空，这表示effect函数只在组件挂载和卸载时执行。

处理依赖关系

如果你希望useEffect在特定的变量发生变化时执行，可以将这个变量添加到依赖数组中。这样，当依赖的变量发生变化时，useEffect将会重新运行。

useEffect(() => {
  // 这里的代码会在变量 `someVariable` 发生变化时执行
  console.log('someVariable changed:', someVariable);
}, [someVariable]);

异步操作

useEffect可以包含异步操作，比如数据获取。在上面的例子中，fetchData函数是一个异步函数，它通过fetch API获取数据。由于useEffect不允许effect函数是异步的，所以可以在effect函数内部定义一个异步函数，然后在其内部执行异步操作。

清理副作用

useEffect还可以返回一个清理函数，在组件卸载时执行。这个清理函数用于取消订阅、清除定时器等操作，以防止内存泄漏。

useEffect(() => {
  // 在组件挂载时执行

  // 返回一个清理函数，在组件卸载时执行
  return () => {
    cleanup();
  };
}, [/* dependencies */]);

总结

在React中，useEffect是一个强大的工具，用于处理组件渲染之外的操作。它为函数式组件提供了类似于生命周期方法的能力，使得处理副作用变得简单而灵活。通过合理使用useEffect，你可以确保应用程序的行为在不同的状态下都是可控的，同时保持组件的纯粹性。