这是 Pastate.js 响应式 react state 管理框架系列教程，欢迎关注，持续更新。
原理剖析
Pastate 的核心是一个管理不变式和响应式 state 的 pastore, 下面来详细介绍 pastore 的内容。
带路径信息的 immutable state
Pastore 内部使用一种独特的带路径信息且不可变（immutable）的 state 作为应用的数据源, 挂载在 store 的 imState 属性上。在实现上，Pastore 把非空数据源都转化为包装类型，具体流程如下图，以 string 类型的节点为例：
state 包装
其中 __store__ 为 state 所在的 store 实例的引用，__xpath__ 为该 state 节点在当前 store 的 state 的路径，如 __xpath__ == '.foo.bar.baz'。
为什么要使用 immutable 数据？
Pastate 使用一种自定义的具有 immutable 特性的数据类型， 而不是 immutable.js 的数据类型。 Immutable 特性指的是数据是不可变的，新的数据只能根据老的不可变数据去重新组合而成，下面举个例子：
/** 可变数据 */
let mutableData = {
foo: 'good',
bar: 'very good'
}
// 可以使用直接赋值的模式去改变数据
mutableData.foo = 'so good'
newData = mutableData
/** 不可变数据 */
let immutableData = {
foo: 'good',
bar: 'very good'
}
// 不可修改老数据，需要根据老数据去构建新数据
newData = Object.assgin({}, immutableData, {foo: 'so good'}) // 可以使用 ES6 的 Object.assgin 函数
newData = {...immutableData, foo: 'so good'} // 也可以使用 ES7 的对象扩展符
immutableData 实现了两种效果：
- 可以把 state 变化过程的每个状态保存起来，这为应用的调试带来了很多新的方法，如时间旅行调试
- 对象内部的数据发生改变时，该对象的引用需要进行更新，这符合函数式编程的要求，可以启用 react 的 pure render ( PureComponent ) 按需快速渲染功能，使应用的性能得到极大提高
为什么要带路径信息？
如果我们手动实现 immutable state 的更新逻辑，会非常麻烦，假设有这样一个 state ：
let state = {
foo: {
bar: {
baz: {
name: 'Peter'
}
}
},
}
// 我们手动来修改 name 属性的值
// 1. 如果是 mutable data
state.foo.bar.baz.name = 'Tom'
newData = state
// 2. 如果是 immutable data
newData = Object.assgin({}, state,
Object.assgin({}, state.foo,
Object.assgin({}, state.foo.bar,
Object.assgin({}, state.foo.bar.baz, {
name: 'Tom'
})
)
)
)
可见，在手动更新 immutble data 的深层嵌套数据时，非常麻烦！而且如果有多个相同或不同嵌套深度的 state 节点需要更改，且这些更改时在运行上连续进行的但是在代码上是封装开的，容易导致重复进行没意义的引用更新：
let state = {
foo: {
bar: {
baz: {
name: 'Peter'
},
id: '1234'
}
},
}
// 我们封装 name 的修改逻辑
function changeName(){
Object.assgin..., Object.assgin..., Object.assgin..., Object.assgin...
}
// 我们封装 age 的修改逻辑
function changeAge(){
Object.assgin..., Object.assgin..., Object.assgin...
}
function handleClick(){
shouldChangeName && changeName()
shouldChangeAge && changeAge()
}
上面的代码，在 handleClick 的实现逻辑中，是否修改 name 或 age 是有可能单独或同时发生的，一般我们会把修改逻辑独立封装并按需调用。如果某个情况下需要连续运行 changeName 和 changeAge， 那么在 changeAge 中的 3 个 Object.assgin 是重复的，没有实际意义。
你可能会考虑使用 immutable.js 库的数据结构，immutable.js 提供完善的 immutable 数据类型和操作方式支持，但在 react 项目中使用 immutable.js 有以下不足：
- immutable.js 的数据格式与原生 JS 格式互不兼容，在渲染时，经常需要在合适的位置使用 xxx.get() 或 xxx.toJS() 获取原生 js 格式（使用 toJS() 会使所有子节点的引用更新，如果直接使用 fromJS(state).toJS() 只是对 state 进行 "深层复制", 不能实现用 immutable 数据来实现快速按需渲染的效果）
- immutable.js 的数据操作模式是基于"节点名称 / 节点名称数组" 来索引节点的，如
imState.setIn(['info', 'basic', 'name'], 'new Name')，而不是用原生 JS 对象属性模式来索引节点, 如state.info.basic.name。因此编辑器无法分析可选属性，也无法索引结果的类型，这使得编程起来效率低，而且比较容易出错。 - immutable.js 确实完备，但过于庞大复杂，学习成本高，许多功能在一般的实际开发中不需要使用到，对初学者不太友好。
因此，Pastate 在每个 state 节点附加了 节点路径信息 ，并实现 state 的自动化 immutable 且按需更新引用的功能！让我们可以享受 immutable 数据的优势的同时，抛开使用 immutable 数据的复杂性。
pastate imState 内部操作机制
Pastore 内部实现了一个异步操作(operation)列表，并定义了一套 operation 压入方法:
- set: 设置值
set(imState.foo.bar, newValue) - merge: 合入新值
merge(imState.foo, {bar: newValue}) - update: 更新值
update(imState.foo.bar, n => n+ '!')
这三个方法会向 store 提交一个 operation, store 把收到 operation 后，暂时存在一个 operation 队列中，在下一个事件循环(event loop)时对 operation 队列进行统一处理，再批量处理中实现按需引用更新，具体流程图如下：
operation 生成和处理流程
在每个 operation 被 push 的前后及在 operation 被 reduce 的前后，pastate 都设计了相应的生命周期函数，你可以通过这些生命周期函数接收、过滤或控制operation，实现自定义逻辑。
-
stateWillAddOperation将要增加 operation 时会被调用 -
stateWillReduceOperations将要执行 operations 时会被调用 -
stateWillApplyOperation将要执行一个 operation 时会被调用 -
stateDidAppliedOperation执行完一个 operation 后会被调用 -
stateDidReducedOperations执行完 operations 时执行
详见 API文档。
响应式 state 镜像
直接使用 set(imState.foo.bar, newValue) 或 merge(imState.foo, {bar: newValue}) 等来进行 immutable state 的操作虽然已经挺方便，但和我们平时修改 js 变量的模式还是不太一样，因此 pastate 为 immutable state 构建了一套响应式的镜像 state 来自动调用 set、merge、或 update 来生成 operation, 使得我们可以用赋值符号 = 或数组操作参数如 push 、pop 等来间接地对 immutable state 进行操作，对于处学者来说无需任何学习成本。 Pastate 内部使用 Object.defineProperty 的方式为响应式 state 节点定义相应的 getter 和 setter, 以实现通过赋值或数组函数发起 set, merge 或 update operation，对接 pastate 异步 operation 处理引擎，流程图如下:
响应式流程
视图响应引擎
当 pastore 完成一批 operations 的 reduce 过程时，会对外发出一个视图更新信号，通过 pastore 的 dispatch 成员函数发出。Pastate 内部实现了 pastate-redux 连接器, 默认使用 redux 作为 state 发生改变时的响应器，并由 react-redux 去连接 react 组件组件，从而实现 pastate-react。同时， pastate 使用 redux 的基本规则实现多模块逻辑，因此，你可以使用 redux 生态系统相关组件或开发工具类配合 pastate 应用，我们非常拥抱 redux 生态系统。
另一方面，你完全可以自行实现一套视图响应逻辑, 甚至实现 pastore 与 vue 或 angular 对接，欢迎尝试。
API 文档
其他信息
在 typescript 中使用
Pastate 使用 typescript 进行开发，具有完善的类型支持，可以直接引入 pastate 并直接在 React Typescript 项目中使用。
在 react-native 中使用
我们正尝试在 react-native 中使用 pastate, 你也可以加入尝试，如果发现什么问题，欢迎提交 issue 告诉我们~
在 preact 或 nerv 中使用
Pastate 在原理上可以与类 react (react alternative) 框架如 preact 或 nerv 配合使用，但未进行全面测试，如果你尝试了，欢迎提交 issue 告诉我们~
相关资源
敬请期待，如果你基于 pastate 开发一些项目，欢迎提交 issue 告诉我们~
贡献指引
- fork pastate 的 github 仓库： https://github.com/BirdLeeSCUT/pastate
- clone 并安装 npm 包
$ git clone <your repo>
$ cd pastate
$ yarn install
- 运行 pastate 开发包
$ yarn start
- 实时测试 pastate 开发包
$ yarn test
- 编译 pastate 开发包
$ yarn dist
目标代码会编译到 /dist 目录下
- 提交代码，发起 pull request。
英文翻译
如果觉得 pastate 非常不错，欢迎参与 pastate 文档英文翻译计划，让更多的国外友人也能尝试 pastate 。如果你有意愿，请在 github 联系。
网友评论