React 中 useEffect Hook 的使用指南

在 React 中，'useEffect' 是一个用于处理副作用操作的 Hook。副作用操作指的是对组件外部环境产生影响的操作，例如访问 API、操作 DOM 元素、订阅事件等。

'useEffect' 接收两个参数：一个是副作用操作的函数，另一个是一个数组，用于指定需要监听的变量。

当组件渲染完成后，'useEffect' 会执行传入的副作用操作函数。如果指定了依赖数组，当数组中的变量发生变化时，'useEffect' 会重新执行副作用操作函数。如果没有指定依赖数组，每次组件重新渲染时，'useEffect' 都会执行。

'useEffect' 可以用来替代类组件中的 'componentDidMount'、'componentDidUpdate' 和 'componentWillUnmount' 生命周期方法。

以下是一个使用 'useEffect' 的示例：

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('组件渲染完成');
    
    return () => {
      console.log('组件即将卸载');
    };
  }, []);

  return <div>Example</div>;
}

在上面的示例中，'useEffect' 的副作用操作函数会在组件渲染完成后执行，并且只会在组件卸载时执行一次。传入的空数组表示没有依赖变量，因此副作用操作函数只会在组件初始化时执行一次。