useEffect：简单理解，熟练使用

2023-09-11 16:53:58

揭开 useEffect 的奥秘：React 中有效管理副作用的利器

引言

在 React 的世界中，useEffect 是一种强大的生命周期函数，它在组件渲染后发挥着至关重要的作用。它允许我们管理副作用，即那些在渲染之外执行的操作，从而打造出交互式且响应迅速的应用程序。本文将深入探讨 useEffect 的本质、依赖项、常见模式以及实际应用，帮助你掌握这项 React 开发中的利器。

useEffect 的本质

useEffect 的本质是一个生命周期函数，它会在组件渲染后执行。它的职责是管理副作用，例如：

与外部数据源交互
设置和清除定时器
执行 DOM 操作

通过将这些操作委托给 useEffect，我们可以在组件的渲染周期之外执行它们，避免不必要的重新渲染，从而提升应用程序的性能。

依赖项：useEffect 的秘密武器

useEffect 拥有一项关键特性——依赖项 。依赖项是一个数组，它指定了 useEffect 函数会在哪些状态或属性发生改变时重新执行。例如：

useEffect(() => {
  // 一些依赖于 count 状态的代码
}, [count]);

在这个例子中，只有当 count 状态发生变化时，useEffect 函数才会重新执行。这有助于避免不必要的重新渲染，提高组件的性能。

记住 useEffect 依赖项，忘记原理

理解 useEffect 的原理固然重要，但它的实际应用更在于记住如何使用依赖项。通过关注依赖项，我们可以控制副作用的执行时机，避免常见的 React 开发错误。

useEffect 的常见模式

在 React 开发中，useEffect 有着广泛的应用场景，以下是一些常见的模式：

数据获取： 用于从 API 或其他数据源获取数据。
定时器： 用于设置和清除计时器，实现倒计时或轮播等功能。
DOM 操作： 用于直接操作 DOM 元素，实现滚动条控制或显示/隐藏元素等效果。
清理： 用于在组件卸载时执行清理操作，如取消订阅或清除计时器。

示例：用 useEffect 创建时钟

为了展示 useEffect 的实际应用，我们创建一个简单的时钟组件：

import { useEffect, useState } from "react";

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // 清理函数，在组件卸载时停止计时器
    return () => clearInterval(timer);
  }, []);

  return (
    <div>{time.toLocaleTimeString()}</div>
  );
}

export default Clock;