我们是否把 React 状态弄得过于复杂？——探讨 Valtio

Source: Dev.to

React 状态看似简单 — 直到它不再简单

React 状态管理常常显得比实际需要的更复杂。
选择器、记忆化、依赖数组……
问题不仅在于 状态是什么，更在于 状态如何更新。

传统状态管理的问题

在许多 React 项目中，尤其是随着应用规模扩大，状态逻辑往往会散落：

• UI 状态和业务状态混在一起
• 为了控制更新而添加选择器
• 引入手动的重新渲染优化
• 为了保持可控性而创建额外的抽象层

它能工作 — 但需要不断的协调。

介绍 Valtio

Valtio 采用基于 代理 的不同方式。与其思考更新触发和订阅，不如直接操作状态。

import { proxy } from 'valtio';

const state = proxy({ count: 0 });

function increment() {
  state.count++;
}

在组件中使用 Valtio

import { useSnapshot } from 'valtio';

function Counter() {
  const snap = useSnapshot(state);
  return <div>{snap.count}</div>;
}

就这么简单。

• 没有选择器
• 没有依赖数组
• 极少的样板代码

好处

• 你不必思考组件 何时 需要重新渲染。
• 你不需要手动编排更新。
• 你专注于状态本身，而不是围绕它的机制。
• 模型感觉更像是响应式的，而不是受控的。

当复杂性仍然存在时

复杂性并不会完全消失。在真实项目中，你仍然需要为以下情况提供结构：

• 动态表单
• 派生状态
• 异步流程

将复杂性从编排层面转移，使代码更易于推理。

相关使用场景

• 复杂表单（例如 React Hook Form、MUI）
• 字段之间存在依赖的动态 UI
• 在开发过程中频繁演变的状态

这些场景往往是传统模式触及瓶颈的地方。

结论

Valtio 并不会取代所有的状态管理方案，但它挑战了一个重要的假设：

我们是在管理 状态… 还是在管理围绕它的 复杂性？

想了解大家最近是如何处理状态管理的。