国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React Reflux

ormsf / 291人閱讀

摘要:概念是根據的創建的單向數據流類庫。的單向數據流模式主要由和組成。數據更新成功后,還是通過事件機制傳遞的組件當中,并更新。整個過程的對接是通過事件驅動的。標識如果首字母大寫就會識別不了,例如將上面的改成。

概念

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

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ 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

單向數據流

不同點

通過內部拓展actions的行為,移除了單例的dispatcher

stores可以監聽actions的行為,無需進行冗雜的switch判斷

stores可以相互監聽,可以進行進一步的數據聚合操作,類似于,map/reduce

waitFor被連續和平行的數據流所替代

創建Action
var statusUpdate = Reflux.createAction(options);

返回值是一個函數,調用這個函數就會觸發相應的事件,在store中監聽這個函數,并作相應的處理

var addItem = Reflux.createAction();

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

addItem({name: "xxx"});
創建多個Action
var TodoActions = Reflux.createActions([
    "addItem",
    "deleteItem"
]);

store監聽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

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

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

例如獲取全部數據:

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之前調用,參數是action傳遞過來的,返回值會傳遞給shouldEmit

shouldEmit(params) action emit之前調用,參數默認是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
  

注意幾個返回值和參數的關系

Action Methods

當需要給所有的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

直接調用addItem()實際上是調用trigger或者triggerAsync或者triggerPromise,它們區別在于

var addItem = Reflux.createAction(); addItem();                 #默認調用triggerAsync,相當于addItem.triggerAsync()
var addItem = Reflux.createAction({sync:true});addItem();       #默認調用trigger,相當于addItem.trigger()
var addItem = Reflux.createAction({asyncResult:true});addItem();#默認調用triggerPromise,相當于addItem.triggerPromise()

trigger和triggerAsync區別在于:

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

trigger和triggerPromise區別在于,triggerPromise的返回值是promise

創建Store

Store可以響應Action的行為,并同服務器交互。

監聽單個Action

在init方法中添加監聽處理

var addItem = Reflux.createAction();

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

addItem({name: "xxx"});
監聽多個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里寫了兩遍監聽處理方法,如果有十個甚至多個的話,寫起來就像這樣的:

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方法,避免重復勞動:

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的標識首字母大寫并加上on就可以了。

  

標識如果首字母大寫就會識別不了,例如將上面的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"});

一般我們寫真實應用的時候都應該采用這種寫法?。?!

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");
同組件結合

前面說了,Action、Store和組件這三者是通過事件機制響應變化的,構建組件的時候首先需要監聽Store的狀態。
先定義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"));

這里有兩點需要注意:

當組件的生命周期結束時需要解除對Store的監聽

當Store調用trigger時,才會執行onStatusChange函數,所以每次Store更新時,需要手動調用trigger函數

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"));

數據會自動更新到state的list當中。

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"));

對數據加了一層過濾器。

  

以上便Component同Store交互的內容,大家可以根據實際情況選擇不同的寫法。

小結

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

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"));

實際情況遠比這復雜,只是提供一個思路供大家參考。

代碼鏈接

github

參考

Reflux

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92330.html

相關文章

  • React 可視化開發工具 Shadow Widget 非正經入門(之四:flux、mvc、mvvm

    摘要:是分發器,是數據與邏輯處理器,會在注冊針對各個命令字的響應回調函數。當按如下方式觸發回調時,回調函數具備事件的特性。 本系列博文從 Shadow Widget 作者的視角,解釋該框架的設計要點。本篇解釋 Shadow Widget 在 MVC、MVVM、Flux 框架之間如何做選擇。 showImg(https://segmentfault.com/img/bVOODj?w=380&h...

    msup 評論0 收藏0
  • React使用總結

    摘要:當使用對象時,在生命周期中運行,此時環境下已經完成了。并不會隨著的更新而改變,因此在使用時一定要注意是否有。但是使用會跳過的過程,會觸發子組件的所有方法包括從而造成性能的浪費。因此為了組件更加清晰高效,應該避免使用。我推薦使用來管理。 兩種架構 現在使用React的開發模式主要有兩種——freeMarker+React以及純靜態React頁面開發。本文著重介紹純靜態React頁面的開...

    LoftySoul 評論0 收藏0
  • React 可視化開發工具 shadow-widget 最佳實踐(上)

    摘要:上例的功能塊定義了如下節點樹入口節點是面板,結合該節點的函數書寫特點,我們接著介紹最佳實踐如何處理功能塊之內的編程。 本文介紹 React + Shadow Widget 應用于通用 GUI 開發的最佳實踐,只聚焦于典型場景下最優開發方法。分上、下兩篇講解,上篇概述最佳實踐,介紹功能塊劃分。 showImg(https://segmentfault.com/img/bVWu3d?w=6...

    techstay 評論0 收藏0
  • React為什么需要Flux-like的庫

    摘要:的關鍵構成梳理了一下,需要配合的庫去使用,是因為要解決通信問題。還有各個事件之間,有可能存在依賴關系,事件后,也觸發。相比于傳統的事件系統,融入了不少的思想。中,將會是最大的門檻之一。 從學習React到現在的一點感受 我覺得應該有不少同學和我一樣,上來學React,覺得甚是驚艷,看著看著,發現facebook 安利了一個flux,圖畫的巨復雜,然后各種例子都有用這個東西,沒辦法,硬著...

    wangtdgoodluck 評論0 收藏0

發表評論

0條評論

ormsf

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<