【React】useEffect 钩子详解

news2024/9/9 1:01:26

文章目录

- 一、useEffect 概念
- 二、useEffect 的基本用法
- - 1. 无依赖项
  - 2. 空依赖项数组
  - 3. 带依赖项的 useEffect
- 三、useEffect 的常见应用场景
- - 1. 数据获取
  - 2. 订阅与清除
  - 3. 动画与定时器
- 四、useEffect 的进阶用法
- - 1. 多个 useEffect
  - 2. 条件执行副作用
- 五、注意事项

useEffect 是 React 钩子函数之一，它使函数组件能够执行副作用操作。常见的副作用包括数据获取、订阅、手动更改 React 组件中的 DOM 以及定时器等。在类组件中，我们通常在生命周期方法中执行这些操作，而在函数组件中，我们使用 useEffect 来完成这些任务。本文将详细介绍 useEffect 的概念、用法及其在实际开发中的应用，旨在帮助开发者全面掌握这一重要特性。

一、useEffect 概念

useEffect 钩子是 React 16.8 版本引入的，它允许我们在函数组件中执行副作用操作。useEffect 函数接收两个参数：

一个副作用函数。
一个依赖项数组（可选）。

基本语法如下：

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清除逻辑（可选）
  };
}, [依赖项]);

二、useEffect 的基本用法

1. 无依赖项

如果不传递依赖项数组，副作用函数会在每次渲染后执行。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('组件渲染或更新了');

    return () => {
      console.log('组件卸载了');
    };
  });

  return <div>Hello, useEffect!</div>;
}

上述代码中，console.log 会在每次组件渲染或更新时执行，而返回的清除函数会在组件卸载时执行。

2. 空依赖项数组

如果传递一个空数组作为依赖项，副作用函数只会在组件首次渲染时执行一次。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('组件首次渲染');

    return () => {
      console.log('组件卸载');
    };
  }, []);

  return <div>Hello, useEffect!</div>;
}

3. 带依赖项的 useEffect

如果传递一个依赖项数组，副作用函数会在依赖项发生变化时执行。

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

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count 发生变化: ${count}`);

    return () => {
      console.log(`清除副作用: ${count}`);
    };
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

上述代码中，当 count 发生变化时，副作用函数会执行，同时会先执行上一次渲染中的清除函数。

三、useEffect 的常见应用场景

1. 数据获取

在函数组件中使用 useEffect 可以方便地进行数据获取。

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // 清除逻辑
    return () => {
      // 取消请求或其他清除操作
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
}

2. 订阅与清除

useEffect 也可以用于设置和清除订阅，例如事件监听器或 WebSocket 连接。

import React, { useEffect } from 'react';

function EventListenerComponent() {
  useEffect(() => {
    const handleResize = () => {
      console.log('窗口大小改变');
    };

    window.addEventListener('resize', handleResize);

    // 清除逻辑
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  return <div>请调整窗口大小查看效果</div>;
}

3. 动画与定时器

我们可以使用 useEffect 来设置和清除定时器或启动动画。

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

function TimerComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 清除逻辑
    return () => {
      clearInterval(intervalId);
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  return <div>计数: {count}</div>;
}

四、useEffect 的进阶用法

1. 多个 useEffect

在一个组件中可以使用多个 useEffect，每个 useEffect 可以负责不同的副作用操作。

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

function MultiEffectComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);

  useEffect(() => {
    document.title = `计数: ${count}`;
  }, [count]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <div>数据: {JSON.stringify(data)}</div>
    </div>
  );
}

2. 条件执行副作用

通过条件判断，可以有选择地执行副作用逻辑。

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

function ConditionalEffectComponent() {
  const [count, setCount] = useState(0);
  const [fetchData, setFetchData] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    if (fetchData) {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }
  }, [fetchData]);

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setFetchData(true)}>获取数据</button>
      <div>数据: {JSON.stringify(data)}</div>
    </div>
  );
}