React 的 useEffect Hook 综合指南：管理功能组件中的副作用-js教程-PHP中文网

A Comprehensive Guide to React

React 中的 useEffect Hook

useEffect 钩子是 React 中最强大、最重要的钩子之一。它允许您在功能组件中执行副作用。副作用可能包括数据获取、手动 DOM 操作、设置订阅以及卸载或更新组件时清理资源等。

在引入 hooks 之前，副作用是通过类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法来处理的。 useEffect 将所有这些生命周期方法整合为一个，使得在功能组件中处理副作用变得更简单。

什么是useEffect？

useEffect 钩子用于在 React 组件中执行副作用。它在渲染后运行，并且可以通过依赖项进行控制，仅在某些值发生变化时运行。

语法：

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

登录后复制

效果函数： 第一个参数是执行副作用的函数。
清理函数：如果从效果中返回一个函数，它将在组件卸载时或效果重新运行之前运行（对于清理很有用）。
依赖项数组： 第二个参数是可选的依赖项数组。仅当此数组中的值发生更改时，效果才会运行。

关键概念：

1.每次渲染后运行效果：

如果未提供依赖项数组，效果将在组件每次渲染后运行。

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

登录后复制

说明： 在这种情况下，每次组件重新渲染时都会运行该效果。

2.运行一次效果（安装时）：

如果传递空的依赖项数组 ([])，则效果将在初始渲染后仅运行一次（类似于类组件中的 componentDidMount）。

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

登录后复制

说明：这里，效果仅在组件安装（第一次渲染）时运行一次。

3.对特定依赖项运行效果：

如果传递依赖项数组（例如，[count]），只要该数组中的任何值发生更改，效果就会运行。

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

登录后复制

说明：只要计数值发生变化，效果就会运行。每次单击按钮时，setCount 都会更新状态，触发重新渲染并重新运行效果。

4.清理功能：

如果你的效果产生了需要清理的副作用（例如订阅、计时器等），你可以从效果中返回一个清理函数。该函数将在效果重新执行之前或组件卸载时运行。

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

登录后复制

说明： useEffect hook 在组件挂载时设置计时器，在组件卸载时调用清理函数（clearInterval），防止内存泄漏。

5.条件效果：

您可以使用依赖项数组来控制效果何时运行。仅当数组中的某个值发生更改时，该效果才会运行。

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

登录后复制

说明： 该组件有两个 useEffect 钩子。一个在计数更改时运行，另一个在名称更改时运行。

useEffect 的常见用例：

数据获取： useEffect 通常用于在组件安装或特定依赖项更改时发出 API 请求或获取数据。

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

const Component = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs when count changes:', count);
  }, [count]); // Dependency on count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

登录后复制

订阅外部事件：例如订阅WebSocket或添加事件监听器。

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

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

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

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, []); // Empty dependency array to run once on mount

  return <div>Time: {time}</div>;
};

登录后复制

计时器和间隔： 设置和清理计时器和间隔。

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

const Component = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');

  useEffect(() => {
    console.log(`Effect runs when 'count' changes: ${count}`);
  }, [count]); // Only runs when count changes

  useEffect(() => {
    console.log(`Effect runs when 'name' changes: ${name}`);
  }, [name]); // Only runs when name changes

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName(name === 'Alice' ? 'Bob' : 'Alice')}>Change Name</button>
    </div>
  );
};

登录后复制