本篇文章给大家分享的内容是关于Pastate.js 之响应式 react state 管理框架 ,有着一定的参考价值,有需要的朋友可以参考一下

Pastate 简介Pastate 是什么

Pastate 是一个响应式 react state 管理框架,实现了对 state 的异步响应式管理。Pastate 是一个精益框架,它对很多高级概念进行了友好封装,这意味着你不必学习一些难以理解的概念,就可以在一个简单的应用中便捷地使用 pastate。在应用变得逐渐复杂的过程中,你只要逐渐学习并使用 pastate 中更多的功能,以满日益复杂的系统开发需求。同时,pastate 也是一个向后兼容的渐进式框架,你可以在现有的 react 或 redux 项目中,把一部分组件改用 pastate 来实现,再逐渐拓展到整个项目。

Pastate 主页: https://pastate.js.org

Pastate GitHub: https://github.com/BirdLeeSCUT/pastate (欢迎 star)

简单例子:

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 的响应式引擎会为自动为你异步高效更新相关视图,详细原理请查看原理章节:

灵感来源

Pastate 受启发于 redux 的 immutable state 管理模式和 vue.js 的响应式 state 设计模式;同时融入的精益(lean)设计思想。

可靠性

Pastate 已经通过 160+ 个测试用例的全面测试,稳定可靠。测试用例的具体内容可查看项目源码中的 src/pastate/tests 目录。

欢迎反馈

如果发现 pastate 的 bug 或有任何建议,欢迎提交 issue,感谢大家的反馈。如果你喜欢 pastate, 希望能给个宝贵的 star ^_^:pastate github 。

快速上手

我们来看看如何用 pastate 构建一个最简单的应用。

安装

Pastate 是一个 react 状态管理框架,需要配合 react 使用。我们先使用 create-react-app 工具创建一个基本的 react 项目,并在这个项目上演示如何使用 pastate:

$ npm install -g create-react-app $ create-react-app my-pastate-app $ cd my-pastate-app

然后,可以用 npm 直接安装 pastate:

$ npm install --save pastate

或使用 yarn 安装:

$ yarn add pastate开始使用

Pastate 使用起来很简单,我们来创建一个 pastate 组件,显示简单的个人信息。

创建 src/MyPastateApp.jsx 文件来编写我们的组件:

import React, { Component } from 'react'; import { Pastore, makeOnlyContainer } from 'pastate'; const store = new Pastore({ name: 'Peter', isBoy: true, age: 10 }) class AppView extends Component { render() { let state = store.state; return ( <p> My name is {state.name}.<br/> I am a {state.isBoy ? "boy" : "girl"}.<br/> I am {state.age} years old.<br/> </p> ) } } export default makeOnlyContainer(AppView, store)

完成,这就是一个入门的 pastate 组件,有以下两点区别于原生 react 项目:

独立于组件的 store

const store = new Pastore({ name: 'Peter', isBoy: true, age: 10 })

Store 是一个数据中心,里面储存着 state 数据,并包含一套 state 管理引擎和视图更新引擎。

在初始化 store 时,需要向 Pastore 构造函数里传入一个初始化 state, 我们通常使用以下命名的方式书写, 以便复用这个初始化 state:

const initState = { name: 'Peter', isBoy: true, age: 10 } const store = new Pastore(initState)

对组件和 store 进行连接

对于只有唯一一个 store 的应用,我们使用 pastate 提供的 makeOnlyContainer 把 store 和组件(Component)连接成一个的容器, 这使得组件视图可以响应 store 中 state 的变化:

接着,把该容器(Container)渲染在HTML中即可:

src/MyPastateApp.jsx

... export default makeOnlyContainer(App, store)

src/index.js

import ReactDOM from 'react-dom'; import container from './MyPastateApp'; ReactDOM.render(container, document.getElementById('root'));

注意,makeOnlyContainer 生成的是一个 React Element, 即 <Xxx />, 因此在 render 时不必再多加一层 <... />。

更新 state 值

接下来我们来尝试更新 state 的值:通过两个按钮来控制 state.age 值的增加和减少。