标签
note
字数
314 字
阅读时间
2 分钟
状态有哪些
随着单页面应用的兴起，
JavaScript需要管理比任何时候都要多的状态，或者可以说是数据
- 服务器响应
- 缓存数据
- 本地生成尚未持久化到服务器的数据
- UI 状态（激活的路由、被选中的标签、是否加载动销或者分页器等）
早期 demo
javascript 无框架时代状态管理例子
js
addBook(book) {
// js 状态逻辑
this.books.push(book);
// 同步服务器逻辑
this.callAddBookApi(book).then(this.ajustUIBook);
// UI 逻辑（同步）
this.mayBeDoSomethingElse();
const li = document.createElement('li');
const span = document.createElement('span');
span.innerText = book.name;
this.$bookUl.appendChild(li);
li.appendChild(span);
}状态管理工具的设计原则
- UI 分层
- 单一数据源和单向数据流
状态管理的作用
- 多组件状态共享（基本要求）
- 能有效分离 UI 层和数据处理层，方便控制状态的变化
- devtools 支持
- 记录每一次的修改操作，以时间线形式展示。
- 支持 time-travel，可以回退操作。
- 可以在不刷新页面的情况下实现对 store 内部数据的修改。
参考
贡献者
jiechen