Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BirdLeeSCUT/pastate
Pastate.js，响应式 react state 管理框架，为高效开发而设计
https://github.com/BirdLeeSCUT/pastate
Last synced: 2 months ago
JSON representation
Pastate.js，响应式 react state 管理框架，为高效开发而设计
- Host: GitHub
- URL: https://github.com/BirdLeeSCUT/pastate
- Owner: BirdLeeSCUT
- License: mit
- Created: 2018-03-03T03:51:11.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-16T02:38:38.000Z (over 6 years ago)
- Last Synced: 2024-04-24T20:03:05.497Z (9 months ago)
- Language: TypeScript
- Homepage: https://pastate.js.org
- Size: 548 KB
- Stars: 77
- Watchers: 5
- Forks: 11
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-star-libs - BirdLeeSCUT/pastate
README
# Pastate ：响应式 react state 管理框架
## 简介
Pastate 是一个响应式 react state 管理框架，实现了对 state 的异步响应式管理。Pastate 是一个精益框架，它对很多高级概念进行了友好封装，这意味着你**不必学习**一些难以理解的概念，就可以在一个简单的应用中便捷地使用 pastate。在应用变得逐渐复杂的过程中，你只要逐渐学习并使用 pastate 中更多的功能，以满日益复杂的系统开发需求。同时，pastate 也是一个向后兼容的渐进式框架，你可以在现有的 react 或 redux 项目中，把一部分组件改用 pastate 来实现，再逐渐拓展到整个项目。
Demo运行体验: [https://birdleescut.github.io/pastate-demo/](https://birdleescut.github.io/pastate-demo/)
Demo项目地址: [https://github.com/BirdLeeSCUT/pastate-demo](https://github.com/BirdLeeSCUT/pastate-demo)
简单例子：
```javascript
const state = store.state
class AppView extends Component {
increaseAge(){
state.myInfo.age += 1
}
changeName(newName){
state.myInfo.name = newName
}
render() {
...
}
}
```
你可以直接对 state 节点进行赋值，pastate 的响应式引擎会异步为你更新视图！这种模式比原生 react 的 setState 方法或原生 redux 的 reducer 模式方便灵活很多！
## 特性
- **便捷易用**：pastate 对高级概念进行了封装，只要有 react 基础知识即可轻松上手
- **响应式 state**: 可以直接用 js 原生模式更新 state 的值，pastate 会响应式地为你更新相关视图
- **类型提示**：pastate 具有完善的类型定义文件，可借助 intelliSense 极大地提高开发效率
- **按需渲染**：pastate 实现了 state 节点按需溯源更新引用机制，视图可以高效响应 state 的变化
- **异步更新机制**：当你对 state 进行连续的修改时，pastate 会高效地为你只做一次异步视图更新
- **友好的学习曲线**：pastate 封装了 flux 模式的高级概念，只需在感兴趣时去了解这些概念
- **兼容 redux 项目**：你可以把 pastate 轻松整合到 redux 项目中，把部分容器实现为 pastate 模式
- **支持 TypeScript**：pastate 本身使用 TpyeScript 进行开发，有完善的类型定义和泛型支持
- **MIT 协议授权** ： 你可以免费地在个人或商业项目中使用，并按需修改或扩展
## 原理简介
Pastate 名字源自 Path State 的简写，pastate 在 state 的每个节点上增加节点的位置(path)信息和 store 归属信息，从而实现对象或数组节点的按需递归引用更新，实现 immutable state 特性，因此 pastate 可以管理复杂的 state 树并实现高效的异步按需渲染。同时 pastate 基于 ES5 的 Object.assign 实现了 state 的全节点响应式操作支持，你只需像修改普通变量一样修改 state 即可, 如 `state.userinfo.name = 'myName'`, 这时 pastate 的响应式引擎会为自动为你异步高效更新相关视图，详细原理请查看[原理章节](https://pastate.js.org/docs/8.原理与API文档.html)：
## 灵感来源
Pastate 受启发于 [redux](https://redux.js.org/) 的 immutable state 管理模式和 [vue.js](https://vuejs.org/) 的响应式 state 设计模式；同时融入的精益([lean](https://en.wikipedia.org/wiki/Lean_product_development))设计思想。
## 可靠性
Pastate 已经通过 160+ 个测试用例的全面测试，稳定可靠。测试用例的具体内容可查看项目源码中的 `src/pastate/tests` 目录。
## 欢迎反馈
如果发现 pastate 的 bug 或有任何建议，欢迎提交 [issue](https://github.com/BirdLeeSCUT/pastate/issues)，感谢大家的反馈。如果你喜欢 pastate, 希望能给个宝贵的 star `^_^`：[pastate github](https://github.com/BirdLeeSCUT/pastate) 。
----
## Pastate 文档
* [1.快速上手](docs/1.快速上手.md)
* [安装](docs/1.快速上手.md#安装)
* [开始使用](docs/1.快速上手.md#开始使用)
* [更新 state 值](docs/1.快速上手.md#更新-state-值)
* [编辑器智能提示(intelliSense)](docs/1.快速上手.md#编辑器智能提示intellisense)
* [2.多组件应用](docs/2.多组件应用.md)
* [更新 state 结构](docs/2.多组件应用.md#更新-state-结构)
* [分别开发 basicInfo 和 address 的视图组件](docs/2.多组件应用.md#分别开发-basicinfo-和-address-的视图组件)
* [store.imState 与 store.state](docs/2.多组件应用.md#storeimstate-与-storestate)
* [使用 props 接收 imState，实现组件的按需渲染](docs/2.多组件应用.md#使用-props-接收-imstate实现组件的按需渲染)
* [使用 imState 渲染视图的注意事项](docs/2.多组件应用.md#使用-imstate-渲染视图的注意事项)
* [了解 PureComponent](docs/2.多组件应用.md#了解-purecomponent)
* [子组件 state 的 intelliSense](docs/2.多组件应用.md#子组件-state-的-intellisense)
* [单实例子组件](docs/2.多组件应用.md#单实例子组件)
* [3.数组渲染与操作](docs/3.数组渲染与操作.md)
* [渲染数组](docs/3.数组渲染与操作.md#渲染数组)
* [修改数组](docs/3.数组渲染与操作.md#修改数组)
* [空初始数组与编辑器 intelliSence](docs/3.数组渲染与操作.md#空初始数组与编辑器-intellisence)
* [多实例组件的内部动作处理](docs/3.数组渲染与操作.md#多实例组件的内部动作处理)
* [react 传统方案](docs/3.数组渲染与操作.md#react-传统方案)
* [传统方案1:父组件处理](docs/3.数组渲染与操作.md#传统方案1父组件处理)
* [传统方案2:子组件结合 index 实现](docs/3.数组渲染与操作.md#传统方案2子组件结合-index-实现)
* [pastate 数组元素操作方案](docs/3.数组渲染与操作.md#pastate-数组元素操作方案)
* [pastate 方案1:获取对于的响应式节点](docs/3.数组渲染与操作.md#pastate-方案1获取对于的响应式节点)
* [pastate 方案2:使用 imState 操作函数](docs/3.数组渲染与操作.md#pastate-方案2使用-imstate-操作函数)
* [4.表单渲染与操作](docs/4.表单渲染与操作.md)
* [使用原生表单元素](docs/4.表单渲染与操作.md#使用原生表单元素)
* [使用 pastate 双向绑定输入组件](docs/4.表单渲染与操作.md#使用-pastate-双向绑定输入组件)
* [Input 文本框](docs/4.表单渲染与操作.md#input-文本框)
* [Checkbox 复选框](docs/4.表单渲染与操作.md#checkbox-复选框)
* [RadioGroup 单选框选项组](docs/4.表单渲染与操作.md#radiogroup-单选框选项组)
* [Select 下拉选择框](docs/4.表单渲染与操作.md#select-下拉选择框)
* [pastate 表单组件的类型定义](docs/4.表单渲染与操作.md#pastate-表单组件的类型定义)
* [对现有组件库进行双向数据绑定](docs/4.表单渲染与操作.md#对现有组件库进行双向数据绑定)
* [使用 Bind 高阶组件](docs/4.表单渲染与操作.md#使用-bind-高阶组件)
* [使用 makeBindable 函数](docs/4.表单渲染与操作.md#使用-makebindable-函数)
* [对于绑定的值为空的情况](docs/4.表单渲染与操作.md#对于绑定的值为空的情况)
* [5.模块化](docs/5.模块化.md)
* [模块化实战任务](docs/5.模块化.md#模块化实战任务)
* [模块划分](docs/5.模块化.md#模块划分)
* [pastate 模块构成](docs/5.模块化.md#pastate-模块构成)
* [模块结构](docs/5.模块化.md#模块结构)
* [模型文件 *.model.js](docs/5.模块化.md#模型文件-modeljs)
* [(1)设计模块的 state](docs/5.模块化.md#1设计模块的-state)
* [(2)定义模块的 actions](docs/5.模块化.md#2定义模块的-actions)
* [(3)创建并配置模块的 store](docs/5.模块化.md#3创建并配置模块的-store)
* [视图部分](docs/5.模块化.md#视图部分)
* [导出模块](docs/5.模块化.md#导出模块)
* [模块的模板文件](docs/5.模块化.md#模块的模板文件)
* [6.多模块应用](docs/6.多模块应用.md)
* [store 被多模块消费](docs/6.多模块应用.md#store-被多模块消费)
* [构建 storeTree 并引用其节点](docs/6.多模块应用.md#构建-storetree-并引用其节点)
* [多模块组合](docs/6.多模块应用.md#多模块组合)
* [使用其他模块的 state](docs/6.多模块应用.md#使用其他模块的-state)
* [缓存 storeTree 的衍生数据](docs/6.多模块应用.md#缓存-storetree-的衍生数据)
* [调用其他模块的 actions](docs/6.多模块应用.md#调用其他模块的-actions)
* [7.规模化](docs/7.规模化.md)
* [路由](docs/7.规模化.md#路由)
* [无参数路由](docs/7.规模化.md#无参数路由)
* [使用 Router 作为根容器](docs/7.规模化.md#使用-router-作为根容器)
* [使用 Route 组件来定义路由](docs/7.规模化.md#使用-route-组件来定义路由)
* [有参数路由](docs/7.规模化.md#有参数路由)
* [在 actions 中使用路由](docs/7.规模化.md#在-actions-中使用路由)
* [嵌入 redux 应用](docs/7.规模化.md#嵌入-redux-应用)
* [开发调试工具](docs/7.规模化.md#开发调试工具)
* [中间件](docs/7.规模化.md#中间件)
* [内置中间件](docs/7.规模化.md#内置中间件)
* [自定义中间件](docs/7.规模化.md#自定义中间件)
* [编译与部署](docs/7.规模化.md#编译与部署)
* [8.原理与API文档](docs/8.原理与API文档.md)
* [原理剖析](docs/8.原理与API文档.md#原理剖析)
* [带路径信息的 immutable state](docs/8.原理与API文档.md#带路径信息的-immutable-state)
* [为什么要使用 immutable 数据？](docs/8.原理与API文档.md#为什么要使用-immutable-数据)
* [为什么要带路径信息？](docs/8.原理与API文档.md#为什么要带路径信息)
* [pastate imState 内部操作机制](docs/8.原理与API文档.md#pastate-imstate-内部操作机制)
* [响应式 state 镜像](docs/8.原理与API文档.md#响应式-state-镜像)
* [视图响应引擎](docs/8.原理与API文档.md#视图响应引擎)
* [API 文档](docs/8.原理与API文档.md#api-文档)
* [9.其他资源](docs/9.其他资源.md)
* [在 typescript 中使用](docs/9.其他资源.md#在-typescript-中使用)
* [在 react-native 中使用](docs/9.其他资源.md#在-react-native-中使用)
* [在 preact 或 nerv 中使用](docs/9.其他资源.md#在-preact-或-nerv-中使用)
* [相关资源](docs/9.其他资源.md#相关资源)
* [贡献指引](docs/9.其他资源.md#贡献指引)
* [英文翻译](docs/9.其他资源.md#英文翻译)
## 贡献
非常欢迎大家加入 pastate 的开发小组，pastate 具体的开发说明请看文档的“相关资源”章节。