Pastate.js : 响应式 react state 管理框架

时间 2019-11-06

标签 pastate.js pastate 响应 react state 管理框架栏目 JavaScript 繁體版

原文原文链接

Pastate 简介

Pastate 是什么

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

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

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

简单例子：react

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 模式方便灵活不少！git

特性

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

灵感来源

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

可靠性

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

欢迎反馈

若是发现 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 (
            <div>
                My name is {state.name}.<br/>
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
            </div>
        )
    }
}

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 值的增长和减小。

先在组件中添加两个操做函数 increaseAge 和 decreaseAge

// src/MyPastateApp.jsx
...
const store = new Pastore(initState)
class AppView extends Component {

    increaseAge(){
        store.state.age += 1
    }
    
    decreaseAge(){
        store.state.age -= 1
    }

    render() {
        ...
    }
}
...

能够看到，使用 pastate 更新 state 很是简便：直接对 state 中须要更新的节点进行赋值便可，与 store 链接的视图会自动更新。

接下来在 JSX 中添加两个按钮来触发这两个操做函数：

src/MyPastateApp.jsx

...
    render() {
        let state = store.state;
        return (
            <div>
            
                My name is {state.name}.<br/>
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
                
                <button onClick={this.decreaseAge}> decrease age </button> 
                <button onClick={this.increaseAge}> increase age </button> 
                
            </div>
        )
    }
...

Amazing！咱们第一个简单的 pastate 应用大功告成：

点击 increaseAge 和 decreaseAge 按钮，能够看到年龄值的变化。
你能够再添加几个按钮来修改 state 中名字和性别，看看视图有没有如你所愿地更新。

Pastate 在 store 中实现了一个响应式和 immutable 特性结合的 state 管理引擎, 咱们能够像修改普通变量同样操做 state, 同时 pastate 能够高效地根据 state 的改变对相关视图进行更新。

编辑器智能提示(intelliSense)

咱们推荐使用 Visual Studio Code 编辑器开发 react / pastate 应用，它拥有很好的变量类型智能提示功能和其余优秀特性，使得咱们能够提升开发效率，并探测减小一些输入性错误。

Tips: vscode 默认关闭了经过 tab 键触发 emmet 的功能, 你能够经过修改设置开启： "emmet.triggerExpansionOnTab": true 。

下面咱们简单地使用 jsDoc 注释来使 state 具备类型提示效果:
src/MyPastateApp.jsx

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

/** @type {initState} */
const state = store.state; // 修改点, 把 state 提取成文件级的变量

class AppView extends Component {

    increaseAge(){
        state.age += 1 // 修改点，使用文件级的变量 state，下同
    }
    
    decreaseAge(){
        state.age -= 1 // 修改点
    }

    render() {
        // 修改点
        return (
            <div>
                My name is {state.name}.<br/> 
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
                ... 
            </div>
        )
    }
}
...

咱们把 store.state 提取为文件级的变量 state，这使得对 state 的使用和修改变得方便。
同时咱们在 const state 以前加上类型注释 /** @type {initState} */, 使得编辑器知道 state 的格式，并得到以下的智能提示效果：

智能提示的功能在 state 结构复杂的时候很是实用。

你也可使用 pastate 提供的 createStore 函数来建立 store, 并自动获取 state 类型定义，具体用法请看API文档，咱们如今先使用 new Pastore 的方式建立 store 。若是你使用 Typescript 进行开发，pastate 支持 Typescript 泛型的变量类型传递功能，无需使用 jsdoc 注释。

这里只是简单例子只是涉及到一个 react 组件，在文档中咱们会介绍如何构建一个包含多个组件的 pastate 应用。

Pastate 文档

将持续更新，欢迎关注本专栏 ^_^