使用reflux進行react組件之間的通信 - samwu－IT工程師數位筆記本

文章出處

前言

組件之間為什么要通信？因為有依賴。
那么，作為React組件，怎么通信？

React官網說，

進行父-子通信，可以直接pass props。
進行子-父通信，往父組件傳給子組件的函數注入參數。
對于沒有父-子關系的組件間的通信，你可以設置你自己的全局事件系統。
詳情見原文和翻譯文
那么，到底如何設置全局事件系統呢，React官網沒講。

但十美分的alloyteam的一篇文章卻講了。

該文指出，

在組件嵌套較深時，純props通信不適用，因為要維護很長的通信鏈。
在組件很多時，定義很多公共變量也不方便。
使用Pub/Sub模式有助于簡化多組件通信問題。

那么，市場上哪個Pub/Sub模式實現較好。

在此，我推薦Reflux。

還要推薦一篇不錯的Reflux的介紹和基本使用文章。
Reflux認為React組件由Store，View，Actions組成。
View即HTML代碼，它是由Store里面的原始數據經過運算得出。
Store里面除了原始數據，還有各種原始數據處理方法。
當View想改變Store的原始數據，可通過Actions。
組件之間的通信，就通過這些原始數據處理方法。
Reflux忽視組件之間的層級關系，不管父-子，子-父等等，皆可通過Store通信。
所以，重點來了（黑板敲三下），我們要理清組件之間的依賴關系。
那么，組件之間有哪些依賴關系呢。
請聽下回分解。
可以劇透的是，
依賴關系無非三種，我依賴你，你依賴我，我們互相依賴，我們互相嘿嘿嘿。
其中，互相依賴這個場景較復雜，示例代碼如下：

// actions1.js
module.exports = Reflux.createActions([
    'getData',
    'setData',
]);

// PageDemo1.js
const reactMixin = require('react-mixin');
const Actions = require('./actions1');
const Store = require('./store1');

class Demo1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    click(){
        Actions.setData("demo1的數據已被設置");
    }
    render() {
        let t = this;
        let data = Store.data;
        if(data == null){
            return null;
        }

        return (
            <div className="demo1">
                <div>{data.name}</div>
                <button onClick={t.click.bind(t)}>設置demo1的數據</button>
                <button onClick={t.click.bind(t)}>設置demo2的數據</button>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.getData();
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Demo1, Reflux.connect(Store));
module.exports = Demo1;

// store1.js
const Actions = require('./actions');
module.exports = Reflux.createStore({
    listenables: [Actions],
    data: null,
    onGetData:function() {
        let t = this;
        t.data = {};
        t.data.name = "demo1";
        t.updateComponent();
    },
    onSetData:function (name) {
        let t = this;
        t.data = {};
        t.data.name = name;
        t.updateComponent();
    },
    updateComponent: function() {
        this.trigger(this.data);
    },

    getInitialState: function() {
        return this.data;
    }
});

// actions2.js
module.exports = Reflux.createActions([
    'getData',
    'setData',
    "setDemo1Data"
]);

// PageDemo2.js
const reactMixin = require('react-mixin');
const Actions = require('./actions2');
const Store = require('./store2');
const Demo1 = require('../demo1');

class Demo2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    click(){
        Actions.setData("demo2的數據已被設置");
    }
    setDemo1Data(){
        Actions.setDemo1Data("demo2設置demo1的數據");
    }
    render() {
        let t = this;
        let data = Store.data;
        if(data == null){
            return null;
        }

        return (
            <div className="demo2">
                <div>{data.name}</div>
                <div>
                    <button onClick={t.click.bind(t)} > 設置demo2的數據</button>
                    <button onClick={t.setDemo1Data.bind(t)} >設置demo1的數據</button>
                </div>
                <Demo1 />
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.getData();
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Demo2, Reflux.connect(Store));
ReactDOM.render(<Demo2/>, document.getElementById('App'));
module.exports = Demo2;

// store2.js
const Actions = require('./actions2');
const demo1Store = require('../store1');

module.exports = Reflux.createStore({
    listenables: [Actions],
    data: null,
    onGetData:function() {
        let t = this;
        t.data = {};
        t.data.name = "demo2";
        t.updateComponent();
    },
    onSetData:function (name) {
        let t = this;
        t.data.name = name;
        t.updateComponent();
    },
    onSetDemo1Data:function(name) {
        demo1Store.onSetData(name);
    },
    updateComponent: function() {
        this.trigger(this.data);
    },

    getInitialState: function() {
        return this.data;
    }
});