React Reflux

ormsf 發(fā)布于2019-08-22 11:51 / 297人閱讀

摘要：概念是根據(jù)的創(chuàng)建的單向數(shù)據(jù)流類庫。的單向數(shù)據(jù)流模式主要由和組成。數(shù)據(jù)更新成功后，還是通過事件機制傳遞的組件當(dāng)中，并更新。整個過程的對接是通過事件驅(qū)動的。標(biāo)識如果首字母大寫就會識別不了，例如將上面的改成。

概念

Reflux是根據(jù)React的flux創(chuàng)建的單向數(shù)據(jù)流類庫。
Reflux的單向數(shù)據(jù)流模式主要由actions和stores組成。例如，當(dāng)組件list新增item時，會調(diào)用actions的某個方法（如addItem(data)）,并將新的數(shù)據(jù)當(dāng)參數(shù)傳遞進去，通過事件機制，數(shù)據(jù)會傳遞到stroes中，stores可以向服務(wù)器發(fā)起請求，并更新數(shù)據(jù)數(shù)據(jù)庫。數(shù)據(jù)更新成功后，還是通過事件機制傳遞的組件list當(dāng)中，并更新ui。整個過程的對接是通過事件驅(qū)動的。就像這樣：

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └──────────────────────────────────────┘

代碼看起來像這樣的：

var TodoActions = Reflux.createActions([
    "addItem"
]);

var TodoStore = Reflux.createStore({
    items: [1, 2],
    listenables: [TodoActions],
    onAddItem: function (model) {
        $.post("/server/add", {data: model}, function (data) {
            this.items.unshift(data);
            this.trigger(this.items);
        });
    }
});


var TodoComponent = React.createClass({
    mixins: [Reflux.listenTo(TodoStore, "onStatusChange")],
    getInitialState: function () {
        return {list: []};
    },
    onStatusChange: function () {
        this.setState({list: TodoStore.items});
    },
    render: function () {
        return (
            
                {this.state.list.map(function (item) {
                    return {item}
                })}
            
        )
    }
});


React.render(, document.getElementById("container"));

同React Flux比較 相同點

有actions

有stores

單向數(shù)據(jù)流

不同點

通過內(nèi)部拓展actions的行為，移除了單例的dispatcher

stores可以監(jiān)聽actions的行為，無需進行冗雜的switch判斷

stores可以相互監(jiān)聽，可以進行進一步的數(shù)據(jù)聚合操作，類似于，map/reduce

waitFor被連續(xù)和平行的數(shù)據(jù)流所替代

創(chuàng)建Action

var statusUpdate = Reflux.createAction(options);

返回值是一個函數(shù)，調(diào)用這個函數(shù)就會觸發(fā)相應(yīng)的事件，在store中監(jiān)聽這個函數(shù)，并作相應(yīng)的處理

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(addItem, "addItem");
    },
    addItem: function (model) {
        console.log(model);
    }
});

addItem({name: "xxx"});

創(chuàng)建多個Action

var TodoActions = Reflux.createActions([
    "addItem",
    "deleteItem"
]);

store監(jiān)聽actions的行為：

var TodoActions = Reflux.createActions([
    "addItem",
    "deleteItem"
]);

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(TodoActions.addItem, "addItem");
        this.listenTo(TodoActions.deleteItem, "deleteItem");
    },
    addItem: function (model) {
       console.log(model)
    },
    deleteItem:function(model){
        console.log(model);
    }
});

TodoActions.addItem({name:"xxx"});
TodoActions.deleteItem({name:"yyy"});

異步Action

真實的應(yīng)用場景中，幾乎所有的操作都會向后端請求，而這些操作都是異步的，Reflux也提供了相應(yīng)的Promise接口

var getAll = Reflux.createAction({asyncResult:true});

例如獲取全部數(shù)據(jù)：

var getAll = Reflux.createAction({asyncResult: true});

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(getAll, "getAll");
    },
    getAll: function (model) {
        $.get("/all", function (data) {
            if (data) {
                getAll.completed(data);
            } else {
                getAll.failed(data);
            }

        });
    }
});

getAll({name: "xxx"})
    .then(function (data) {
        console.log(data);
    })
    .catch(function (err) {
        throw err;
    });

Action hooks

Reflux為每個action都提供了兩個hook方法

preEmit(params)，action emit之前調(diào)用，參數(shù)是action傳遞過來的，返回值會傳遞給shouldEmit

shouldEmit(params) action emit之前調(diào)用，參數(shù)默認(rèn)是action傳遞，如果preEmit有返回值，則是preEmit返回值，返回值決定是否emit

情景一：

var addItem = Reflux.createAction({
    preEmit: function (params) {
        console.log("preEmit:" + params);           
    },
    shouldEmit: function (params) {
        console.log("shouldEmit:" + params);           
    }
});

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(addItem, "addItem");
    },
    addItem: function (params) {
        console.log("addItem:" + params);
    }
});

addItem("xxx");

控制臺打印
$ preEmit:xxx
$ shouldEmit:xxx

情景二：

var addItem = Reflux.createAction({
    preEmit: function (params) {
        console.log("preEmit:" + params);
        return 324;
    },
    shouldEmit: function (params) {
        console.log("shouldEmit:" + params);
        return true;
    }
});

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(addItem, "addItem");
    },
    addItem: function (params) {
        console.log("addItem:" + params);
    }
});

addItem("xxx");

控制臺打印
$ preEmit:xxx
$ shouldEmit:324
$ addItem:324

  注意幾個返回值和參數(shù)的關(guān)系

Action Methods

當(dāng)需要給所有的action添加公用方法時，可以這么干：

Reflux.ActionMethods.print = function (str) {
    console.log(str);
};

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(addItem, "addItem");
    },
    addItem: function (params) {
        console.log("addItem:" + params);
    }
});

addItem.print("xxx");

trigger、triggerAsync和triggerPromise

直接調(diào)用addItem()實際上是調(diào)用trigger或者triggerAsync或者triggerPromise，它們區(qū)別在于

var addItem = Reflux.createAction(); addItem();                 #默認(rèn)調(diào)用triggerAsync，相當(dāng)于addItem.triggerAsync()
var addItem = Reflux.createAction({sync:true});addItem();       #默認(rèn)調(diào)用trigger，相當(dāng)于addItem.trigger()
var addItem = Reflux.createAction({asyncResult:true});addItem();#默認(rèn)調(diào)用triggerPromise，相當(dāng)于addItem.triggerPromise()

trigger和triggerAsync區(qū)別在于：

triggerAsync = setTimeout(function () {
    trigger()
}, 0);

trigger和triggerPromise區(qū)別在于，triggerPromise的返回值是promise

創(chuàng)建Store

Store可以響應(yīng)Action的行為，并同服務(wù)器交互。

監(jiān)聽單個Action

在init方法中添加監(jiān)聽處理

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(addItem, "addItem");
    },
    addItem: function (model) {
        console.log(model);
    }
});

addItem({name: "xxx"});

監(jiān)聽多個Action 作死寫法

var TodoActions = Reflux.createActions([
    "addItem",
    "deleteItem"
]);

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(TodoActions.addItem, "addItem");
        this.listenTo(TodoActions.deleteItem, "deleteItem");
    },
    addItem: function (model) {
        console.log(model);
    },
    deleteItem: function (model) {
        console.log(model);
    }
});

TodoActions.addItem({name: "xxx"});
TodoActions.deleteItem({name: "yyy"});

兩個action的時候在init里寫了兩遍監(jiān)聽處理方法，如果有十個甚至多個的話，寫起來就像這樣的：

var TodoActions = Reflux.createActions([
    "item1",
    "item2",
    "item3",
    "item4",
    "item5",
    "item6",
    "item7",
    "item8",
    "item9",
    "item10"
]);

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(TodoActions.item1, "item1");
        this.listenTo(TodoActions.item2, "item2");
        this.listenTo(TodoActions.item3, "item3");
        this.listenTo(TodoActions.item4, "item4");
        this.listenTo(TodoActions.item5, "item5");
        this.listenTo(TodoActions.item6, "item6");
        this.listenTo(TodoActions.item7, "item7");
        this.listenTo(TodoActions.item8, "item8");
        this.listenTo(TodoActions.item9, "item9");
        this.listenTo(TodoActions.item10, "item10");

    },
    item1: function (model) {
        console.log(model);
    },
    item2: function (model) {
        console.log(model);
    }
});

TodoActions.item1({name: "xxx"});
TodoActions.item2({name: "yyy"});

listenToMany

還好Reflux給我們提供了listenToMany方法，避免重復(fù)勞動：

var TodoActions = Reflux.createActions([
    "item1",
    "item2",
    "item3",
    "item4",
    "item5",
    "item6",
    "item7",
    "item8",
    "item9",
    "item10"
]);

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenToMany(TodoActions);
    },
    onItem1: function (model) {
        console.log(model);
    },
    onItem2: function (model) {
        console.log(model);
    }
});

TodoActions.item1({name: "xxx"});
TodoActions.item2({name: "yyy"});

處理方法只需讓action的標(biāo)識首字母大寫并加上on就可以了。

標(biāo)識如果首字母大寫就會識別不了，例如將上面的item1改成Itme1。這坑爹的！

listenables

var TodoActions = Reflux.createActions([
    "item1",
    "item2",
    "item3",
    "item4",
    "item5",
    "item6",
    "item7",
    "item8",
    "item9",
    "item10"
]);

var TodoStore = Reflux.createStore({
    listenables: [TodoActions],
    onItem1: function (model) {
        console.log(model);
    },
    onItem2: function (model) {
        console.log(model);
    }
});

TodoActions.item1({name: "xxx"});
TodoActions.item2({name: "yyy"});

一般我們寫真實應(yīng)用的時候都應(yīng)該采用這種寫法?。?！

Store Methods

拓展Store的公用方法有兩種方式。

方式一

Reflux.StoreMethods.print = function (str) {
    console.log(str);
};

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({
    init: function () {
        this.listenTo(addItem, "addItem");
    },
    addItem: function (model) {
        console.log(model);
    }
});

TodoStore.print("rrr");

方式二

var Mixins = {
    print: function (str) {
        console.log(str);
    }
}

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({
    mixins: [Mixins],
    init: function () {
        this.listenTo(addItem, "addItem");
    },
    addItem: function (model) {
        console.log(model);
    }
});

TodoStore.print("rrr");

同組件結(jié)合

前面說了，Action、Store和組件這三者是通過事件機制響應(yīng)變化的，構(gòu)建組件的時候首先需要監(jiān)聽Store的狀態(tài)。
先定義Action和Store

var TodoActions = Reflux.createActions([
    "getAll"
]);

var TodoStore = Reflux.createStore({
    items: [1,2,3],
    listenables: [TodoActions],
    onGetAll: function () {
        this.trigger(this.items);
    }
});

基本

var TodoComponent = React.createClass({
    getInitialState: function () {
        return {list: []};
    },
    onStatusChange: function (list) {
        this.setState({list: list});
    },
    componentDidMount: function () {
        this.unsubscribe = TodoStore.listen(this.onStatusChange);
        TodoActions.getAll();
    },
    componentWillUnmount: function () {
        this.unsubscribe();
    },
    render: function () {
        return (
            
                {this.state.list.map(function (item) {
                    return {item}
                })}
            
        )
    }
});    
React.render(, document.getElementById("container"));

這里有兩點需要注意：

當(dāng)組件的生命周期結(jié)束時需要解除對Store的監(jiān)聽

當(dāng)Store調(diào)用trigger時，才會執(zhí)行onStatusChange函數(shù)，所以每次Store更新時，需要手動調(diào)用trigger函數(shù)

Mixins

var TodoComponent = React.createClass({
    mixins: [Reflux.ListenerMixin],
    getInitialState: function () {
        return {list: []};
    },
    onStatusChange: function (list) {
        this.setState({list: list});
    },
    componentDidMount: function () {
        this.unsubscribe = TodoStore.listen(this.onStatusChange);
        TodoActions.getAll();
    },
    render: function () {
        return (
            
                {this.state.list.map(function (item) {
                    return {item}
                })}
            
        )
    }
});
React.render(, document.getElementById("container"));

Reflux.listenTo

var TodoComponent = React.createClass({
    mixins: [Reflux.listenTo(TodoStore,"onStatusChange")],
    getInitialState: function () {
        return {list: []};
    },
    onStatusChange: function (list) {
        this.setState({list: list});
    },
    componentDidMount: function () {
        TodoActions.getAll();
    },
    render: function () {
        return (
            
                {this.state.list.map(function (item) {
                    return {item}
                })}
            
        )
    }
});
React.render(, document.getElementById("container"));

Reflux.connect

var TodoComponent = React.createClass({
    mixins: [Reflux.connect(TodoStore,"list")],
    getInitialState: function () {
        return {list: []};
    },
    componentDidMount: function () {
        TodoActions.getAll();
    },
    render: function () {
        return (
            
                {this.state.list.map(function (item) {
                    return {item}
                })}
            
        )
    }
});
React.render(, document.getElementById("container"));

數(shù)據(jù)會自動更新到state的list當(dāng)中。

Reflux.connectFilter

var TodoComponent = React.createClass({
    mixins: [Reflux.connectFilter(TodoStore, "list", function (list) {
        return list.filter(function (item) {
            return item > 1;
        });
    })],
    getInitialState: function () {
        return {list: []};
    },
    componentDidMount: function () {
        TodoActions.getAll();
    },
    render: function () {
        return (
            
                {this.state.list.map(function (item) {
                    return {item}
                })}
            
        )
    }
});
React.render(, document.getElementById("container"));

對數(shù)據(jù)加了一層過濾器。

  以上便Component同Store交互的內(nèi)容，大家可以根據(jù)實際情況選擇不同的寫法。

小結(jié)

我這人喜歡拿代碼來表述思想。

var TodoActions = Reflux.createActions([
    "getAll",
    "addItem",
    "deleteItem",
    "updateItem"
]);

var TodoStore = Reflux.createStore({
    items: [1, 2, 3],
    listenables: [TodoActions],
    onGetAll: function () {
        $.get("/all", function (data) {
            this.items = data;
            this.trigger(this.items);
        }.bind(this));
    },
    onAddItem: function (model) {
        $.post("/add", model, function (data) {
            this.items.unshift(data);
            this.trigger(this.items);
        }.bind(this));
    },
    onDeleteItem: function (model, index) {
        $.post("/delete", model, function (data) {
            this.items.splice(index, 1);
            this.trigger(this.items);
        }.bind(this));
    },
    onUpdateItem: function (model, index) {
        $.post("/update", model, function (data) {
            this.items[index] = data;
            this.trigger(this.items);
        }.bind(this));
    }
});


var TodoComponent = React.createClass({
    mixins: [Reflux.connect(TodoStore, "list")],
    getInitialState: function () {
        return {list: []};
    },
    componentDidMount: function () {
        TodoActions.getAll();
    },   
    render: function () {
        return (
            
                {this.state.list.map(function(item){
                    return 
                })}
            
        )
    }
});

var TodoItem = React.createClass({
    componentDidMount: function () {
        TodoActions.getAll();
    },
    handleAdd: function (model) {
        TodoActions.addItem(model);
    },
    handleDelete: function (model,index) {
        TodoActions.deleteItem(model,index);
    },
    handleUpdate: function (model) {
        TodoActions.updateItem(model);
    },
    render: function () {
        var item=this.props.data;
        return (
            
                {item.name}
                {item.email}
                /*操作按鈕*/
            
        )
    }
});
React.render(, document.getElementById("container"));

實際情況遠(yuǎn)比這復(fù)雜，只是提供一個思路供大家參考。

代碼鏈接

github

參考

Reflux

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92330.html

發(fā)表評論

登陸后可評論

0條評論

ormsf

男|高級講師

我要關(guān)注我要私信

TA的文章

阿里云服務(wù)器中Docker安裝與鏡像使用【MySQL、redis快速訪問】

閱讀 1150·2021-11-25 09:43
akkocloud：美西圣何塞CN2 GIA VPS，299元/年，1核/512M內(nèi)存/10gSSD

閱讀 1583·2021-10-25 09:47
javascript新手實例2-CSS操作

閱讀 2478·2019-08-30 13:46
簡單說 CSS中的 object-fit 與 object-position

閱讀 764·2019-08-29 13:45
angular4中引入echarts

閱讀 1292·2019-08-26 13:29
Flex 布局教程

閱讀 3000·2019-08-23 15:30
微信小程序

閱讀 1113·2019-08-23 14:17
柯里化

閱讀 1336·2019-08-23 13:43

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React Reflux

相關(guān)文章

React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之四：flux、mvc、mvvm

React使用總結(jié)

React 可視化開發(fā)工具 shadow-widget 最佳實踐（上）

React為什么需要Flux-like的庫

發(fā)表評論

0條評論

ormsf

男|高級講師

TA的文章

阿里云服務(wù)器中Docker安裝與鏡像使用【MySQL、redis快速訪問】

akkocloud：美西圣何塞CN2 GIA VPS，299元/年，1核/512M內(nèi)存/10gSSD

javascript新手實例2-CSS操作

簡單說 CSS中的 object-fit 與 object-position

angular4中引入echarts

Flex 布局教程

微信小程序

柯里化

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React Reflux

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！