React Hooks useEffect 进阶教程

React Hooks 是 React 16.8 版本引入的新特性，它允许我们在不编写类的情况下使用 state 和其他 React 特性。useEffect 是其中最常用的 Hook 之一，它允许你在组件中执行副作用操作，比如数据获取、订阅或手动更改 DOM。

useEffect 基础

首先，我们来回顾一下 useEffect 的基本用法：

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

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

  useEffect(() => {
    // 在这里执行副作用操作
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的例子中，每次点击按钮时，count 状态都会更新，useEffect 会在这个更新后运行，并改变页面的标题。

useEffect 进阶

清除副作用

在 useEffect 中，我们经常需要清除副作用，以避免在组件卸载后继续执行代码或订阅。这可以通过返回一个函数来实现：

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('This is a timeout');
  }, 2000);

  return () => {
    clearTimeout(timer);
  };
}, []);

在上面的例子中，我们设置了一个定时器，并在组件卸载时清除它。

依赖项数组

useEffect 可以接受一个依赖项数组作为第二个参数，这样它就只在数组中指定的变量变化时运行：

useEffect(() => {
  console.log('Component is mounted');
  return () => {
    console.log('Component is unmounted');
  };
}, [count]); // 只在 count 变化时运行

并行副作用

React 允许你在 useEffect 中返回多个清理函数，这些函数会并行执行：

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('This is a timeout');
  }, 2000);

  const interval = setInterval(() => {
    console.log('This is an interval');
  }, 1000);

  return () => {
    clearTimeout(timer);
    clearInterval(interval);
  };
}, []);

在上面的例子中，timer 和 interval 都会在组件卸载时清除。

扩展阅读

想了解更多关于 React Hooks 的知识？请访问我们的React Hooks 教程。

[center]

希望这篇教程能帮助你更好地理解 React Hooks 中的 useEffect。如果你有任何疑问，欢迎在评论区留言。