摘要：一個(gè)簡(jiǎn)潔強(qiáng)大的數(shù)據(jù)流框架安裝特性上圖為架構(gòu)圖參考自在其基礎(chǔ)上做了以下簡(jiǎn)化和改進(jìn)功能上集成我們不再需要多寫一個(gè)方法去異步獲取數(shù)據(jù)更多情況下我們將使用讓代碼更加簡(jiǎn)潔的使用更加靈活的單實(shí)例和多實(shí)例使用能很巧妙地實(shí)現(xiàn)跨組件通信和通用組件控制邏

一個(gè)簡(jiǎn)潔, 強(qiáng)大的數(shù)據(jù)流框架; Github

npm install --save nearly-react

上圖為 flux 架構(gòu)圖, Nearly 參考自 flux, 在其基礎(chǔ)上做了以下簡(jiǎn)化和改進(jìn):

集成 Promise, 我們不再需要多寫一個(gè) componentDidMount 方法去異步獲取數(shù)據(jù), 更多情況下, 我們將使用 stateless component 讓代碼更加簡(jiǎn)潔;

Store 的使用更加靈活, Store 的單實(shí)例和多實(shí)例使用能很巧妙地實(shí)現(xiàn)跨組件通信和通用組件控制邏輯的復(fù)用;

API 更加簡(jiǎn)潔, 在業(yè)務(wù)中一般只會(huì)用到 connect 和 dispatch 方法;

對(duì)狀態(tài)進(jìn)行集中管理, 寫法與原始的 React 相似, 學(xué)習(xí)和遷移成本低;

更輕量, min 后只有 6K;

import React from "react";
import { render } from "react-dom";
import {connect, dispatch, registerStore} from "nearly-react";

registerStore("counter", {
    // 必須實(shí)現(xiàn) init 方法, 它將被隱式調(diào)用, 作用是初始化 state
    init() {
        return {
            count: 0
        };
    },

   add(getState, step) {
       return {
           count: getState().count + step
       };
   }
};

let incr = () => dispatch("counter::add", 1);
let decr = () => dispatch("counter::add", -1);

function Counter(props) {
    return (
        

             - 
            {props.count}
             + 
        
    )
}

let HocCounter = connect("counter", Counter);

render(
    ,
    document.getElementById("root")
)

該方法將注冊(cè)一個(gè) Store, 需要注意的是該方法必須先 connect 執(zhí)行, 例:

registerStore("customStore", {
    // 必須實(shí)現(xiàn) init 方法
    init() {
        return {sum: 0};
    },
    add(getState, num) {
        return {sum: getState().sum + num};
    }
});

registerStore 接受的第二個(gè)參數(shù)里的方法即 Dispatcher functions;
Dispatcher function 的第一個(gè)參數(shù)為 getState 方法, 該方法返回的永遠(yuǎn)是當(dāng)前最新的 state, 其余參數(shù)為 dispatch 方法所傳的參數(shù);

對(duì)于 Dispatcher function 的返回值:

為普通對(duì)象時(shí), 返回值直接 merge 進(jìn)舊 state;

為 Promise 時(shí), 取 Promise.prototype.then 方法里的參數(shù) merge 進(jìn)舊 state;

為 null 時(shí), 不 merge, 不觸發(fā) render;

例:

registerStore("counter", {
    // 必須實(shí)現(xiàn) init 方法, init 中也可以使用 Promise
    init() {
        return fetch("./test.json").then(res => res.json());
    },
    
    add(getState, step) {
        return {
            count: getState().count + step
        };
    },
   
   // 異步增加
    addAsync(getState, step) {
        return new Promise(resolve => {        
            setTimeout(() => {
                // getState 方法返回的永遠(yuǎn)是最新的 state
                let count = getState().count + step;
                resolve({count})
            }, 1000);
        });
    },

    // 不觸發(fā)渲染
    nothing(getState, step) {
        return null;
    }
};

默認(rèn)配置的 action 格式為 ${storeName}::${function},

dispatch 會(huì)根據(jù) action 映射到相應(yīng)的 Dispatcher function, 并將 args 作為參數(shù)傳入 Dispatcher function, 將其返回的結(jié)果提交給 Store, 由 Store 觸發(fā)組件更新;

該方法會(huì)根據(jù) storeName 獲得 Store, 再將 Store, Component 和 PlaceHolder 組合, 返回一個(gè)高階組件;

其中, PlaceHolder 為默認(rèn)展示組件 (可選), 當(dāng)且僅當(dāng) init 返回 Promise 時(shí)有效, 在 Component 被插入 dom 之前, 組合后的高階組件會(huì)先展示 PlaceHolder 組件, 可用于實(shí)現(xiàn) loading 之類的效果;

但組件過(guò)大時(shí), 可以通過(guò)設(shè)置 isPure 為 true 來(lái)提高性能, 當(dāng)設(shè)置 isPure 為 true 時(shí), 只有 dispatch 方法能觸發(fā)組件的 render, 我相信這比通過(guò)在 shouldComponentUpdate 里寫 shallowEqual 要有效得多;

也可以通過(guò)下面的 configure 設(shè)置默認(rèn)的 isPure 為 true;

即 dispatch 的高階函數(shù); 例:

dispatch("counter::add", 1);
等同于: dispatcher("counter::add")(1);

dispatch("test::testAdd", 1, 2, 3, 4);
等同于: dispatcher("test::testAdd", 1, 2)(3, 4);

使用 nearly 進(jìn)行開(kāi)發(fā), 我們需要考慮 storeName 重復(fù)的情況, 我推薦通過(guò)將 storeName 映射文件路徑的方式來(lái)避免;

nearly 提供了兩個(gè)可供配置的方法: beforeConnect 和 beforeDispatch;

beforeConnect 會(huì)在 connect 方法被調(diào)用之前調(diào)用, 接受的參數(shù)為傳入 connect 方法的 storeName; 我們可以用它去加載對(duì)應(yīng)的 JS 文件, 并注冊(cè) Store;

beforeDispatch 會(huì)在 dispatch 方法被調(diào)用之前調(diào)用, 接受的參數(shù)為傳入 dispatch 方法的 action;

默認(rèn)配置如下:

import {registerStore, getStore} from "./store";

let config = {
    // 默認(rèn)的 isPure
    defaultPure: false,

    // 默認(rèn)不開(kāi)啟自動(dòng)注冊(cè) Store
    beforeConnect(storeName) {
        // let store = getStore(storeName);

        // if (!store) {
        //    let realName = storeName.split("#")[0];
        //    registerStore(storeName, require(`./actions/${realName}.js`));
        // }
    },

    beforeDispatch(action) {
        let [storeName, dispatcherName] = action.split("::");

        let store = getStore(storeName);
        if (!store) {
            throw Error(`store "${storeName}" does not exist`);
        }

        let dispatcher = store.dispatchers[dispatcherName];
        if (!dispatcher) {
            throw Error(`the module does not export function ${dispatcherName}`);
        }

        return {store, dispatcher};        
    }
}

使用示例:

import {configure, getStore, registerStore} from "nearly-react";

configure({
    beforeConnect(storeName) {
        // 配置 beforeConnect 方法, 自動(dòng)注冊(cè) Store
        // 當(dāng) store 不存在時(shí)
        // 自動(dòng)去 actions 目錄下加載 JS 模塊, 并注冊(cè) Store
        let store = getStore(storeName);

        if (!store) {
            let realName = storeName.split("#")[0];
            registerStore(storeName, require(`./actions/${realName}.js`));
        }
    }
});

在業(yè)務(wù)中我們經(jīng)常需要跨組件通信, 或者組件間共享數(shù)據(jù);

使用 Nearly 我們能很輕易地將兩個(gè)不同的組件綁定相同的 Store, 只要傳入 connect 的 storeName 是相同的即可;
例: 簡(jiǎn)單的輸入同步顯示

registerStore("vm", {
    // 必須實(shí)現(xiàn) init 方法, 它將被隱式調(diào)用, 作用是初始化 state
    init() {
        return {
            value: ""
        };
    },

   change(getState, value) {
       return {
           return { value };
       };
   }
};

// /components/Input.js
let change = e => dispatch("vm::change", e.target.value);

function Input(props) {
    return 
}
export default connect(Input, "vm");


// /components/Text.js
function Text(props) {
    return 
{props.value}
}
export default connect(Text, "vm");

詳見(jiàn)示例: One-store

我們開(kāi)發(fā)通用組件時(shí)會(huì)需要給同一組件綁定同一 store 的不同實(shí)例以復(fù)用; 可以通過(guò)給 storeName 加上 #id 來(lái)區(qū)分不同 Store;

// Dialog.js
export default function Dialog (props){
    return 
{props.content}
}

let DialogA = connect(Dialog, "dialog#a");
let DialogB = connect(Dialog, "dialog#b");

// 關(guān)閉彈窗 A
dispatch("dialog#a::close");
// 關(guān)閉彈窗 B
dispatch("dialog#b::close");

注意, 當(dāng)在組件內(nèi)部使用 dispatch 時(shí), 可以通過(guò) props._storeName 來(lái)確定 storeName;

詳見(jiàn)示例: Dialog

TodoMVC

Counter

Dialog

One-store

React-SPA-Seed

nearly-config.js 必須在業(yè)務(wù)邏輯之前加載;

雖然有 registerStore API, 不過(guò)作者還是推薦使用 connect 來(lái)隱式注冊(cè) Store, 因?yàn)?connect 通過(guò) storeName 映射文件的方式來(lái)注冊(cè) Store, 在確保唯一性的同時(shí)更容易維護(hù)和 debug;

在 Nearly 中對(duì) Promise 的判斷是不準(zhǔn)確的 (只要有 then 方法均認(rèn)為是 Promise 實(shí)例) , 一方面是因?yàn)?Nearly 中只使用了 then 方法, 另一方面是為了兼容 jQuery.Deferred 等類庫(kù);

歡迎提 issue 或是 pr;