摘要：簡介是什么是一個響應式管理框架，實現了對的異步響應式管理。可靠性已經通過個測試用例的全面測試，穩定可靠。安裝是一個狀態管理框架，需要配合使用。

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 (
            

                My name is {state.name}.

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

                I am {state.age} years old.

            
        )
    }
}

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, 即 , 因此在 render 時不必再多加一層 <... />。

接下來我們來嘗試更新 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 (
            

            
                My name is {state.name}.

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

                I am {state.age} years old.

                
                 decrease age  
                 increase age  
                
            
        )
    }
...

Amazing！我們第一個簡單的 pastate 應用大功告成：

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

Pastate 在 store 中實現了一個響應式和 immutable 特性結合的 state 管理引擎, 我們可以像修改普通變量一樣操作 state, 同時 pastate 可以高效地根據 state 的改變對相關視圖進行更新。

我們推薦使用 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 (
            

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

                I am {state.age} years old.

                ... 
            
        )
    }
}
...
    

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

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

智能提示的功能在 state 結構復雜的時候非常實用。

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

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

1.快速上手

2.多組件應用

3.數組渲染與操作

4.表單渲染與操作

5.模塊化

6.多模塊應用

7.規模化

8.原理與API文檔

9.其他資源

將持續更新，歡迎關注本專欄 ^_^