React 2025：Signals 和并发的未来

React 19 带来了变革，引入了编译器 (React Compiler) 和 use 钩子，极大地优化了“心智负担”。但当我们放眼 2025，一个更根本的范式转变正在发生。真正的未来，在于 Signals。

React 19 不是终点，而是起点

React 19 的核心是 React Compiler，它自动实现了 `memo` 化，解决了我们手动优化（useMemo, useCallback）的痛点。这使得 React 变得更“智能”。然而，它并没有改变 React 的核心——**虚拟 DOM (VDOM)** 和 **自顶向下** 的渲染机制。

每当状态变化时，React 仍然需要计算 VDOM 的 diff，然后才决定更新哪些 DOM。虽然 React Compiler 加速了这个过程，但“计算 diff”这个动作本身，在某些大规模应用中仍然是性能瓶*颈*。

Signals：告别 VDOM Diff

Signals 是一种完全不同的状态管理范式，它在 Solid.js、Preact 和 Qwik 等框架中大放异彩。

它的核心思想很简单：**不再是状态变化时“通知”组件重新渲染，而是状态变化时“直接”更新订阅了它的 DOM 节点。**

想象一下，Signals 是一个“可订阅的值”。当这个值变化时，它会精确地通知所有“订阅者”（可能是一个 DOM 元素，也可能是另一个计算）。

传统 React vs. Signals

我们来看一个简单的计数器对比。

// 传统 React (useState)
function Counter() {
  const [count, setCount] = useState(0);

  // 整个函数会重新执行 (re-render)
  console.log('Component re-rendered'); 

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

在上面的例子中，每次点击按钮，Counter 组件函数都会**重新执行**，React 会生成新的 VDOM，然后进行 diff。

现在，看看（ hypothetical，假想的）React Signals 会是什么样子：

// 假想的 React Signals API (受 Solid.js 启发)
function Counter() {
  // 1. 创建一个 signal，useSignal 返回一个 getter
  const count = useSignal(0); 

  // 2. 创建一个“衍生” signal (computed)
  const double = () => count() * 2;

  // 这个函数只在
            // 首次挂载时执行一次！
  console.log('Component mounted'); 

  return (
    <div>
      {/* 3. 在 JSX 中读取 signal (自动订阅) */}
      <p>Count: {count()}</p>
      <p>Double: {double()}</p>
      
      {/* 4. 更新 signal */}
      <button onClick={() => count.set(count() + 1)}>
        Increment
      </button>
    </div>
  );
}

在这个假想的例子中，点击按钮时：

Counter 组件函数**不会**重新执行。
count signal 的值被更新。
它通知了它的两个订阅者：第一个 <p> 标签和 double。
double 重新计算，并通知它的订阅者：第二个 <p> 标签。
最终，只有两个 <p> 标签内的文本节点被**直接更新**。没有 VDOM，没有 diff。

并发 (Concurrency) 与 Signals 的结合

那么，React 团队苦心经营的并发特性（如 useTransition）怎么办？Signals 是同步更新的，这是否会与并发模式冲突？

这正是 2025 年 React 需要解决的核心问题：**如何将“精确更新”的 Signals 和“可中断渲染”的并发模式优雅地结合起来？**

一种可能的方向是，React 可能会引入“事务性”的 Signal 更新，允许更新在 useTransition 中被“降级”处理，从而在保持 UI 响应性的同时，享受 Signal 带来的精确更新性能。

结语

React 19 的编译器为我们抹平了 `memo` 的复杂性，而 Signals 则可能在未来彻底改变 React 的渲染底层。

虽然 React 团队尚未官宣将 Signals 作为核心（尽管 Preact 团队已经这样做了），但社区的呼声和 Solid.js 的成功已经证明了这条路的潜力。到了 2025 年，我们很可能会看到一个融合了编译器、并发和 Signals 优点的、性能更极致的 React。

返回所有文章