【教程】Pastate.js 响应式 react 框架（八） 原理和API文档

这是 Pastate.js 响应式 react state 管理框架系列教程，欢迎关注，持续更新。

原理剖析

Pastate 的核心是一个管理不变式和响应式 state 的 pastore, 下面来详细介绍 pastore 的内容。

带路径信息的 immutable state

Pastore 内部使用一种独特的带路径信息且不可变（immutable）的 state 作为应用的数据源, 挂载在 store 的 imState 属性上。在实现上，Pastore 把非空数据源都转化为包装类型，具体流程如下图，以 string 类型的节点为例：

其中 __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 实现了两种效果：

1. 可以把 state 变化过程的每个状态保存起来，这为应用的调试带来了很多新的方法，如时间旅行调试
2. 对象内部的数据发生改变时，该对象的引用需要进行更新，这符合函数式编程的要求，可以启用 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 被 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 文档

• pastore
• pastate-redux
• pastate 工具
• pastate 内置中间件

• HOC 高阶组件

  • Bind
  • Input
  • Checkbox
  • RadioGroup
  • Select

其他信息

在 typescript 中使用

Pastate 使用 typescript 进行开发，具有完善的类型支持，可以直接引入 pastate 并直接在 React Typescript 项目中使用。

在 react-native 中使用

我们正尝试在 react-native 中使用 pastate, 你也可以加入尝试，如果发现什么问题，欢迎提交 issue 告诉我们~

在 preact 或 nerv 中使用

Pastate 在原理上可以与类 react (react alternative) 框架如 preact 或 nerv 配合使用，但未进行全面测试，如果你尝试了，欢迎提交 issue 告诉我们~

相关资源

敬请期待，如果你基于 pastate 开发一些项目，欢迎提交 issue 告诉我们~

贡献指引

1. fork pastate 的 github 仓库： https://github.com/BirdLeeSCU...
2. clone 并安装 npm 包

$ git clone <your repo>
$ cd pastate
$ yarn install

1. 运行 pastate 开发包

$ yarn start

1. 实时测试 pastate 开发包

$ yarn test

1. 编译 pastate 开发包

$ yarn dist

目标代码会编译到 /dist 目录下

1. 提交代码，发起 pull request。

英文翻译

如果觉得 pastate 非常不错，欢迎参与 pastate 文档英文翻译计划，让更多的国外友人也能尝试 pastate 。如果你有意愿，请在 github 联系。