从纯函数到 useEffect：React Hooks 核心逻辑与实战指南

栀秋666
64 阅读5分钟

一、引言：React Hooks 为何成为现代 React 开发的基石

在 React 的演进历程中，2019 年发布的 Hooks 是一次革命性的变革。它让开发者摆脱了传统 Class 组件的束缚，以更简洁、直观的方式构建用户界面。

传统的 Class 组件存在诸多痛点：代码冗长、逻辑复用困难（如 HOC 嵌套）、生命周期割裂导致维护成本高。更重要的是，this 指向问题和状态管理的复杂性增加了学习门槛。

而 React Hooks 的出现，标志着开发模式从“面向类”转向“函数式思维”。通过 useState 和 useEffect 等核心 Hook，我们可以在不编写 class 的情况下使用状态和副作用，真正实现了“逻辑即组件”。

本文将聚焦三大核心概念——纯函数特性、useState 状态管理、useEffect 副作用处理，结合实战代码深入剖析 Hooks 的设计哲学与最佳实践。

二、纯函数：React 组件与 Hooks 的 "基本法"

2.1 纯函数的定义与特性

纯函数（Pure Function）是函数式编程中的核心概念，它是指满足以下两个严格条件的函数：

1. 相同的输入始终产生相同的输出（确定性）

函数的输出仅由其输入参数决定，不受任何外部状态（如全局变量、环境变量、数据库数据、用户输入等）的影响。换句话说，只要输入参数不变，无论调用多少次、在什么时间调用，函数的返回结果都完全一致。

2. 没有副作用（无副作用性）

函数执行过程中不会修改函数外部的状态，也不会产生任何可观察的外部影响。副作用的常见形式包括：

  • 修改全局变量、对象的属性或数组的元素；
  • 执行 I/O 操作（如读写文件、发送网络请求、打印日志、操作 DOM）；
  • 改变系统状态（如修改时间、触发事件）；
  • 抛出异常（除非异常是由输入参数直接导致的，且属于函数逻辑的一部分）。

2.2 纯函数在 React 中的体现

image.png 该组件仅return了内部变量的和，不会有可观察的副作用，完全符合纯函数原则

2.3 为什么 React 依赖纯函数？

React 对纯函数的依赖，本质上是由其核心设计理念（UI = f (state + props)）  和性能优化、可预测性、并发渲染等关键机制决定的。纯函数的两个核心特性（相同输入必产生相同输出、无副作用），恰好解决了 React 构建用户界面时的核心问题。这直接带来了两大好处：

  1. 调试成本极低：如果 UI 出现问题，只需检查 props/state 的值和渲染逻辑，无需考虑全局变量、外部状态的干扰；
  2. 状态溯源清晰：组件的输出完全由输入决定，符合「单向数据流」的设计，避免了因隐式依赖（如全局变量）导致的状态混乱。

三、useState：React 状态管理的核心工具

3.1. 什么是 useState？

useState 是一个函数，用于在函数组件中声明局部状态变量。它接收一个初始值，返回一个数组：

  • 第一个元素：当前的状态值（类似类组件的 this.state）；
  • 第二个元素：更新状态的函数（类似类组件的 this.setState）。 useState 是 React 提供的状态钩子，语法如下：

image.png 若初始值计算开销大，建议传入函数，仅在首次渲染执行： image.png 一旦调用 setNum，React 会重新渲染组件，并保留最新状态。

image.png 点击按钮后，num 更新，UI 自动刷新 —— 这就是“响应式”的魅力。

3.2 函数式更新：解决 "状态依赖" 问题

当新状态依赖于前一个状态时，应使用函数式更新，防止闭包陷阱：

image.png

这种方式确保读取的是最新的状态值，而不是渲染快照中的旧值，特别适用于高频事件（如连续点击）。

四、useEffect：副作用管理的全能选手

4.1 什么是 "副作用"？

副作用是指那些无法在纯函数内完成的操作，如：

  • 发起 API 请求
  • 设置定时器
  • 手动操作 DOM
  • 监听事件

由于这些行为会改变外部状态，破坏“纯函数”原则，因此 React 提供了 useEffect 作为“副作用的安全区”。

4.2 useEffect 的三种使用场景

4.2.1 无依赖项：每次渲染后执行

useEffect(() => {
  console.log('组件更新了');
});

⚠️ 注意：这会在每次状态变化后触发，容易造成性能问题，慎用。 即每次状态改变均会触发

4.2.2 空依赖项：仅挂载时执行一次

useEffect(() => {
  fetchData();
}, []); // 类似 componentDidMount

常用于初始化数据加载或绑定全局事件监听。

4.2.3 有依赖项：依赖变化时执行

useEffect(() => {
  const timer = setInterval(() => {
    console.log(`定时器运行中，num=${num}`);
  }, 1000);
  return () => clearInterval(timer); // 清理
}, [num]); // num 变化时重建定时器

关键点：依赖项必须完整，否则会因闭包捕获旧值而出错。

五、清理副作用：避免内存泄漏的关键

每个副作用都应考虑“如何清除”，否则可能导致：

  • 定时器持续运行
  • 事件监听堆积
  • 请求返回后更新已卸载组件

例如下面这段代码就产生了内存泄漏的问题

image.png 即每次都在新建定时器，每次点击会多出一个定时器 而useEffect 允许返回一个清理函数，在下次执行前或组件卸载时自动调用：

image.png 即重新执行effect 之前，会先清除上一个定时器

执行流程为：

  1. 组件挂载 → 执行副作用
  2. 组件更新（依赖变）→ 执行上一次的清理函数 → 执行新的副作用
  3. 组件卸载 → 执行最后一次清理

六、总结：Hooks 思维下的 React 开发范式

React Hooks 不仅是语法糖，更是一种全新的开发范式：

  • 纯函数是基础：保证组件可预测、易测试；
  • useState 是核心：驱动 UI 响应状态变化，善用函数式更新；
  • useEffect 是保障：精准控制副作用生命周期，务必清理资源；

未来，随着 useCallback、useMemo、useContext 等更多 Hooks 的普及，我们将能更灵活地组织逻辑，实现真正的“逻辑复用”。

avatar
文章
阅读
粉丝