useState 是如何工作的？一文带你拆解 React 组件状态的秘密

小小续
180 阅读3分钟

useState 原理解析（React Hooks）

useState 是 React 提供的 状态管理 Hook，用于在函数组件中添加 响应式状态。
它的核心原理是通过 闭包 + Fiber 机制 来管理状态和组件更新。

1. useState 基本用法

jsx
复制编辑
import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 声明一个 state 变量 count，初始值为 0

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

useState(0) ：初始化 count 状态，初始值为 0
setCount(count + 1) ：更新 count 值，触发组件重新渲染

2. useState 执行过程

当 useState 在组件内部被调用时，React 需要：

  1. 在内部保存状态（避免变量在重新渲染时被清空）。
  2. 确保状态更新后组件重新渲染（但不会影响其他组件）。
  3. 在多次 setState 过程中合并和优化更新。

🔹 执行流程：

  • useState 不会在组件每次渲染时都重新初始化，它会记住上次的状态。
  • setState 触发组件重新渲染，并使用最新的 state。

3. useState 的内部原理

React 通过 Fiber 机制 来管理 useState 的状态。
其内部使用了 链表结构 存储状态，让 Hook 在函数组件的每次渲染时能正确获取当前状态。

🔹 伪代码模拟 useState 实现

js
复制编辑
// React 内部的状态存储结构
let stateStore = [];
let stateIndex = 0;

function useState(initialValue) {
  // 1 组件首次渲染时，初始化 state
  let currentIndex = stateIndex;
  if (stateStore[currentIndex] === undefined) {
    stateStore[currentIndex] = initialValue;
  }

  // 2️ setState 函数，更新 state 并触发组件重新渲染
  function setState(newValue) {
    stateStore[currentIndex] = newValue;
    render(); // 触发组件重新渲染
  }

  stateIndex++; // 更新索引，确保多次 useState 调用不冲突
  return [stateStore[currentIndex], setState];
}

// 模拟组件渲染
function render() {
  stateIndex = 0; // 组件重新渲染时，索引重置
  Counter(); // 重新执行组件函数
}

🔹 useState 运行逻辑

  • stateStore：存储所有状态变量
  • stateIndex：记录 useState 调用的顺序，保证状态不混乱
  • setState：修改 stateStore，然后触发 render() 重新执行组件

💡 关键点：

  • useState 是按顺序执行的，这也是为什么 Hook 不能写在 if 语句里。
  • stateStore 保持状态，即使函数组件重新执行，状态不会丢失。
  • React 通过 Fiber 来优化 setState，确保不会触发不必要的更新。

4. useState 关键特性

useState 只会初始化一次

jsx
复制编辑
function Example() {
  const [count, setCount] = useState(Math.random()); // 只在第一次渲染时计算

  return <p>{count}</p>;
}

即使组件重新渲染，count 也不会变，因为 useState 只在组件第一次渲染时取初始值。

useState 不会自动合并对象

在类组件中，setState 会合并对象，但 useState 不会：

jsx
复制编辑
const [user, setUser] = useState({ name: "Alice", age: 25 });

// 只修改 age，name 会丢失
setUser({ age: 26 }); 

// 正确方式：手动合并
setUser(prev => ({ ...prev, age: 26 }));

💡 解决方案：使用 ...prevState 合并旧状态。

setState 是异步的

jsx
复制编辑
const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // 仍然是旧值
}

🔹 为什么 console.log(count) 仍然是旧值？

  • setState 不会立即修改 state，而是等到组件重新渲染后才生效。
  • 如果需要获取最新的 state，应该使用 useEffect 或 prevState。

** 解决方案：**

jsx
复制编辑
setCount(prevCount => prevCount + 1);

setCount 传入 函数 时，React 会使用最新的 state。

5. useState 适用场景

  • 存储局部状态（计数器、表单数据）
  • 控制 UI 交互（弹窗开关、主题切换）
  • 与 useEffect 结合（监听状态变化）

6. 结论

  • useState 通过数组索引存储状态，确保组件多次渲染时数据不会丢失。
  • setState 是异步的，使用 prevState 确保拿到最新值。
  • useState 不会自动合并对象，需要手动 ...spread 合并。
  • useState 只会在组件首次渲染时初始化，之后不会再取 initialValue。
  • useState 依赖 Fiber 机制优化状态更新，避免不必要的渲染。

希望这篇 useState 原理解析对你有帮助！

avatar
文章
阅读
粉丝