pastate

KO | EN

gitlite — search

#hacktoberfest #typescript #go #machine-learning #rust #deep-learning #linux #macos #windows #pytorch #mcp #ios #openai #open-source

(★ 76)

Pastate.js，响应式 react state 管理框架，为高效开发而设计

pastate Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 原理图](https://upload-images.jianshu.io/upload_images/1234637-ed283d2d6dbd5ed3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 灵感来源
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 具体的开发说明请看文档的“相关资源”章节。

pastate

pastate Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

pastate

pastate Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README