React-useEffect

useEffect 是 React Hooks 中的一个函数，用于处理组件的副作用操作。副作用通常包括数据获取、订阅、手动修改 DOM 等操作，而 useEffect 允许你在函数组件中执行这些操作。

基本用法

useEffect 接收两个参数：一个函数和一个依赖数组。函数定义了副作用的操作，而依赖数组用于指定何时触发这个副作用。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 副作用操作
    console.log('Component is mounted');

    // 返回一个清理函数（可选）
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 依赖数组为空时，只在组件挂载和卸载时执行

  return <div>My Component</div>;
}

在上述例子中，useEffect 中的函数会在组件挂载时执行一次（类似于类组件的 componentDidMount），并且由于依赖数组为空，该函数也会在组件卸载时执行（类似于类组件的 componentWillUnmount）。

处理异步操作

useEffect 也常用于处理异步操作，例如数据获取：

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

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

  useEffect(() => {
    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);
      }
    };

    fetchData();
  }, []); // 空的依赖数组确保该 effect 只在组件挂载时执行

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

在这个例子中，useEffect 被用于发起异步数据请求，并在数据返回后更新组件的状态。

处理依赖项变化

如果你想在特定依赖项变化时执行副作用操作，只需将这些依赖项添加到依赖数组中：

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

function ExampleComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await fetch(`https://api.example.com/user/${userId}`);
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        console.error('Error fetching user data:', error);
      }
    };

    fetchUserData();
  }, [userId]); // 当 userId 变化时执行副作用

  return (
    <div>
      {userData ? (
        <p>User data: {userData.name}</p>
      ) : (
        <p>Loading user data...</p>
      )}
    </div>
  );
}

在上述例子中，useEffect 的依赖数组包含 userId，所以当 userId 变化时，useEffect 中的函数会被重新执行。