Lit 中的状态管理哲学：为什么它“几乎没有状态管理”

如果美丽 or 帅气的你是从 Vue / React 转过来使用 Lit，大概率会有一个疑问：

状态放哪？
没有 store？没有 hooks？没有 provide/inject？
这怎么写复杂组件？

答案很简单，也很“反直觉”：

Lit 的设计目标，从一开始就不是“承载复杂状态”。

而是：

让组件只关心“输入 → 输出”。

---

一、先给结论（IImportant）

Lit 不缺状态管理能力，
它是刻意拒绝把状态管理“内置进组件模型”。

这和 Vue / React 是根本性的设计分歧。

---

二、Lit 的核心假设是什么？

Lit 的核心假设只有一句话：

复杂状态应该存在于组件之外，而不是组件内部。

所以 Lit 的组件更像：

• 纯 UI 单元
• 行为可预测
• 输入输出清晰

而不是：

• 业务状态容器
• 数据流中心

---

三、Lit 的“状态”到底是什么？

在 Lit 中，只有一种真正意义上的状态：

会触发 render 的响应式属性（Reactive Properties）

@property({ type: Number })
count = 0

它的作用只有一个：

当值变化 → 触发更新流程 → 重新 render

---

3.1 Lit 不区分 state / props

在 Lit 中：

@property()
value = ''

既可以是：

• 外部传入（props）
• 内部维护（state）

Lit 不关心来源，只关心变化。

---

四、为什么 Lit 没有“状态管理方案”？

因为 Lit 的作者认为：

“状态管理”是应用层问题，不是组件层问题

所以 Lit：

• 不提供 store
• 不提供 context API
• 不强推数据流方向

---

五、那复杂状态放哪？（Important）

Lit 官方推荐的方式是：

外部状态容器（Plain JS）

export const appState = {
  user: null,
  theme: 'light'
}

组件只是：

@customElement('user-info')
class UserInfo extends LitElement {
  @property() user

  render() {
    return html`${this.user?.name}`
  }
}

---

事件驱动（Event-first）

this.dispatchEvent(
  new CustomEvent('login', {
    detail: user,
    bubbles: true,
    composed: true
  })
)

由外部系统负责：

• 接收事件
• 更新状态
• 再把新状态传回组件

---

与任意状态库集成

Lit 不关心你用什么：

• Redux
• Zustand
• MobX
• RxJS
• XState

只要：

store.subscribe(() => {
  element.value = store.state.value
})

---

六、Lit 的“反 Hook”哲学

在 React 中：

const [count, setCount] = useState(0)

在 Lit 中：

count = 0

然后：

this.count++

Lit 的观点是：

组件实例本身就是状态容器

不需要再套一层抽象。

---

七、一个非常容易误用的点（IImportant）

不推荐在 Lit 组件里做：

• 复杂业务状态流转
• 多来源数据合并
• 大量副作用管理

推荐：

• 把 Lit 组件当成 “可复用 UI 函数”
• 把业务逻辑上移到应用层

---

八、Context / Provide / Inject 怎么办？

如果你确实需要跨层级共享数据：

8.1 官方方案：@lit/context

const themeContext = createContext('theme')

@provide({ context: themeContext })
theme = 'dark'

但注意：

这是可选工具，而不是核心能力

Lit 并不鼓励大量使用 Context。

---

九、为什么 Lit 更适合 Design System？

因为 Design System 的本质是：

• 低状态
• 高复用
• 稳定 API
• 长生命周期

而 Lit 的组件：

天生符合这些特征

---

十、与 Vue / React 状态模型的本质差异

维度	Vue / React	Lit
状态中心	组件	应用
数据流	内聚	外置
生命周期	框架定义	浏览器定义
组件职责	UI + 逻辑	UI

---

十一、一个非常重要的工程经验

当你觉得 Lit “不好管理状态”时，
往往是你在用 Lit 做“不该由组件完成的事”。

这是一个架构信号。

---

十二、总结一句话

Lit 的状态管理哲学不是“怎么管理”，
而是“不要在这里管理”。