摘要：簡介是什么是一個響應(yīng)式管理框架，實(shí)現(xiàn)了對的異步響應(yīng)式管理?？煽啃砸呀?jīng)通過個測試用例的全面測試，穩(wěn)定可靠。安裝是一個狀態(tài)管理框架，需要配合使用。

Pastate 是一個響應(yīng)式 react state 管理框架，實(shí)現(xiàn)了對 state 的異步響應(yīng)式管理。Pastate 是一個精益框架，它對很多高級概念進(jìn)行了友好封裝，這意味著你不必學(xué)習(xí)一些難以理解的概念，就可以在一個簡單的應(yīng)用中便捷地使用 pastate。在應(yīng)用變得逐漸復(fù)雜的過程中，你只要逐漸學(xué)習(xí)并使用 pastate 中更多的功能，以滿日益復(fù)雜的系統(tǒng)開發(fā)需求。同時(shí)，pastate 也是一個向后兼容的漸進(jìn)式框架，你可以在現(xiàn)有的 react 或 redux 項(xiàng)目中，把一部分組件改用 pastate 來實(shí)現(xiàn)，再逐漸拓展到整個項(xiàng)目。

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 節(jié)點(diǎn)進(jìn)行賦值，pastate 的響應(yīng)式引擎會異步為你更新視圖！這種模式比原生 react 的 setState 方法或原生 redux 的 reducer 模式方便靈活很多！

便捷易用：pastate 對高級概念進(jìn)行了封裝，只要有 react 基礎(chǔ)知識即可輕松上手

響應(yīng)式 state: 可以直接用 js 原生模式更新 state 的值，pastate 會響應(yīng)式地為你更新相關(guān)視圖

類型提示：pastate 具有完善的類型定義文件，可借助 intelliSense 極大地提高開發(fā)效率

按需渲染：pastate 實(shí)現(xiàn)了 state 節(jié)點(diǎn)按需溯源更新引用機(jī)制，視圖可以高效響應(yīng) state 的變化

異步更新機(jī)制：當(dāng)你對 state 進(jìn)行連續(xù)的修改時(shí)，pastate 會高效地為你只做一次異步視圖更新

友好的學(xué)習(xí)曲線：pastate 封裝了 flux 模式的高級概念，只需在感興趣時(shí)去了解這些概念

兼容 redux 項(xiàng)目：你可以把 pastate 輕松整合到 redux 項(xiàng)目中，把部分容器實(shí)現(xiàn)為 pastate 模式

支持 TypeScript：pastate 本身使用 TpyeScript 進(jìn)行開發(fā)，有完善的類型定義和泛型支持

MIT 協(xié)議授權(quán) ： 你可以免費(fèi)地在個人或商業(yè)項(xiàng)目中使用，并按需修改或擴(kuò)展

Pastate 名字源自 Path State 的簡寫，pastate 在 state 的每個節(jié)點(diǎn)上增加節(jié)點(diǎn)的位置(path)信息和 store 歸屬信息，從而實(shí)現(xiàn)對象或數(shù)組節(jié)點(diǎn)的按需遞歸引用更新，實(shí)現(xiàn) immutable state 特性，因此 pastate 可以管理復(fù)雜的 state 樹并實(shí)現(xiàn)高效的異步按需渲染。同時(shí) pastate 基于 ES5 的 Object.assign 實(shí)現(xiàn)了 state 的全節(jié)點(diǎn)響應(yīng)式操作支持，你只需像修改普通變量一樣修改 state 即可, 如 state.userinfo.name = "myName", 這時(shí) pastate 的響應(yīng)式引擎會為自動為你異步高效更新相關(guān)視圖，詳細(xì)原理請查看原理章節(jié)：

Pastate 受啟發(fā)于 redux 的 immutable state 管理模式和 vue.js 的響應(yīng)式 state 設(shè)計(jì)模式；同時(shí)融入的精益(lean)設(shè)計(jì)思想。

Pastate 已經(jīng)通過 160+ 個測試用例的全面測試，穩(wěn)定可靠。測試用例的具體內(nèi)容可查看項(xiàng)目源碼中的 src/pastate/tests 目錄。

如果發(fā)現(xiàn) pastate 的 bug 或有任何建議，歡迎提交 issue，感謝大家的反饋。如果你喜歡 pastate, 希望能給個寶貴的 star ^_^：pastate github 。

我們來看看如何用 pastate 構(gòu)建一個最簡單的應(yīng)用。

Pastate 是一個 react 狀態(tài)管理框架，需要配合 react 使用。我們先使用 create-react-app 工具創(chuàng)建一個基本的 react 項(xiàng)目，并在這個項(xiàng)目上演示如何使用 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 使用起來很簡單，我們來創(chuàng)建一個 pastate 組件，顯示簡單的個人信息。

創(chuàng)建 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 (
            

                My name is {state.name}.

                I am a {state.isBoy ? "boy" : "girl"}.

                I am {state.age} years old.

            
        )
    }
}

export default makeOnlyContainer(AppView, store)

完成，這就是一個入門的 pastate 組件，有以下兩點(diǎn)區(qū)別于原生 react 項(xiàng)目：

獨(dú)立于組件的 store

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

Store 是一個數(shù)據(jù)中心，里面儲存著 state 數(shù)據(jù)，并包含一套 state 管理引擎和視圖更新引擎。

在初始化 store 時(shí)，需要向 Pastore 構(gòu)造函數(shù)里傳入一個初始化 state, 我們通常使用以下命名的方式書寫, 以便復(fù)用這個初始化 state：

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

對組件和 store 進(jìn)行連接

對于只有唯一一個 store 的應(yīng)用，我們使用 pastate 提供的 makeOnlyContainer 把 store 和組件(Component)連接成一個的容器, 這使得組件視圖可以響應(yīng) 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, 即 , 因此在 render 時(shí)不必再多加一層 <... />。

接下來我們來嘗試更新 state 的值：通過兩個按鈕來控制 state.age 值的增加和減少。

先在組件中添加兩個操作函數(shù) 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 中需要更新的節(jié)點(diǎn)進(jìn)行賦值即可，與 store 連接的視圖會自動更新。

接下來在 JSX 中添加兩個按鈕來觸發(fā)這兩個操作函數(shù)：

src/MyPastateApp.jsx

...
    render() {
        let state = store.state;
        return (
            

            
                My name is {state.name}.

                I am a {state.isBoy ? "boy" : "girl"}.

                I am {state.age} years old.

                
                 decrease age  
                 increase age  
                
            
        )
    }
...

Amazing！我們第一個簡單的 pastate 應(yīng)用大功告成：

點(diǎn)擊 increaseAge 和 decreaseAge 按鈕， 可以看到年齡值的變化。
你可以再添加幾個按鈕來修改 state 中名字和性別，看看視圖有沒有如你所愿地更新。

Pastate 在 store 中實(shí)現(xiàn)了一個響應(yīng)式和 immutable 特性結(jié)合的 state 管理引擎, 我們可以像修改普通變量一樣操作 state, 同時(shí) pastate 可以高效地根據(jù) state 的改變對相關(guān)視圖進(jìn)行更新。

我們推薦使用 Visual Studio Code 編輯器開發(fā) react / pastate 應(yīng)用，它擁有很好的變量類型智能提示功能和其他優(yōu)秀特性，使得我們可以提高開發(fā)效率，并探測減少一些輸入性錯誤。

Tips: vscode 默認(rèn)關(guān)閉了通過 tab 鍵觸發(fā) emmet 的功能, 你可以通過修改設(shè)置開啟： "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; // 修改點(diǎn), 把 state 提取成文件級的變量

class AppView extends Component {

    increaseAge(){
        state.age += 1 // 修改點(diǎn)，使用文件級的變量 state，下同
    }
    
    decreaseAge(){
        state.age -= 1 // 修改點(diǎn)
    }

    render() {
        // 修改點(diǎn)
        return (
            

                My name is {state.name}.
 
                I am a {state.isBoy ? "boy" : "girl"}.

                I am {state.age} years old.

                ... 
            
        )
    }
}
...
    

我們把 store.state 提取為文件級的變量 state，這使得對 state 的使用和修改變得方便。

同時(shí)我們在 const state 之前加上類型注釋 /** @type {initState} */, 使得編輯器知道 state 的格式，并獲得如下的智能提示效果：

智能提示的功能在 state 結(jié)構(gòu)復(fù)雜的時(shí)候非常實(shí)用。

你也可以使用 pastate 提供的 createStore 函數(shù)來創(chuàng)建 store, 并自動獲取 state 類型定義，具體用法請看API文檔，我們現(xiàn)在先使用 new Pastore 的方式創(chuàng)建 store 。如果你使用 Typescript 進(jìn)行開發(fā)，pastate 支持 Typescript 泛型的變量類型傳遞功能，無需使用 jsdoc 注釋。

這里只是簡單例子只是涉及到一個 react 組件，在文檔中我們會介紹如何構(gòu)建一個包含多個組件的 pastate 應(yīng)用。

1.快速上手

2.多組件應(yīng)用

3.數(shù)組渲染與操作

4.表單渲染與操作

5.模塊化

6.多模塊應(yīng)用

7.規(guī)?；?/p>

8.原理與API文檔

9.其他資源

將持續(xù)更新，歡迎關(guān)注本專欄 ^_^