@brizer 2016-02-08T14:32:11.000000Z 字数 5442 阅读 1303

React之组件间沟通

前言

本文主要学习React中组件之间的通信方式。

父子组件

前面我们学到使用props和state来进行父子间的通信，父亲通过属性传递给子级，子级通过回调改变挂载父亲上的属性：


var MyContainer = React.createClass({
    getInitialState: function(){
        return {
            list: ['item1', 'item2'],
            curItem: 'item1'
        }
    },
    // 改变curItem的回调函数
    changeItem: function(item){
        this.setState({
            curItem: item
        });
    },
    render: function(){
        return (
            <div>
                The curItem is: {this.state.curItem}
                <List list={this.state.list} changeItem={this.changeItem}/>
            </div>
        )
    }
});
var List = React.createClass({
    onClickItem: function(item){
        this.props.changeItem(item);
    },
    render: function(){
        return (
            <ul>
                {
                    (function(){
                        var self = this;
                        return this.props.list.map(function(item){
                            return (
                                <li onClick={self.onClickItem.bind(self, item)}>I am {item}, click me!</li>     
                            )
                        });
                    }.bind(this))()
                }
            </ul>
        )
    }
})
ReactDOM.render(
  <MyContainer />,
  document.getElementById('example')
);

ReactJS中数据的流动是单向的，父组件的数据可以通过设置子组件的props传递数据给子组件。如果想让子组件改变父组件的数据，可以在父组件中传一个callback(回调函数)给子组件，子组件内调用这个callback即可改变父组件的数据。

<MyContainer />是<List />的父组件，<MyContainer />通过props传递list数据给<List />组件，如果<MyContainer />中的list改变，<List />会重新渲染列表数据。而<List />可以通过<MyContainer />传来的changeItem函数，改变<MyContainer />的curItem数据。

兄弟组件

兄弟组件不能直接相互传送数据，此时可以将数据挂载在父组件中，由两个组件共享：如果组件需要数据渲染，则由父组件通过props传递给该组件；如果组件需要改变数据，则父组件传递一个改变数据的回调函数给该组件，并在对应事件中调用。


var MyContainer = React.createClass({
    getInitialState: function(){
        return {
            list: ['item1', 'item2'],
            curItem: 'item1'
        }
    },
    // 改变curItem的回调函数
    changeItem: function(item){
        this.setState({
            curItem: item
        });
    },
    render: function(){
        return (
            <div>
                The curItem is: {this.state.curItem}
                <List list={this.state.list} curItem={this.state.curItem} />
                <SelectionButtons changeItem={this.changeItem}/>
            </div>
        )
    }
});
var List = React.createClass({
    render: function(){
        var selectedStyle = {
            color: 'white',
            background: 'red'
        };
        return (
            <ul>
                {
                    (function(){
                        var self = this;
                        return this.props.list.map(function(item){
                            var itemStyle = (item == self.props.curItem) ? selectedStyle : {};
                            return (
                                <li style={itemStyle}>I am {item}!</li>     
                            )
                        });
                    }.bind(this))()
                }
            </ul>
        )
    }
});
var SelectionButtons = React.createClass({
    onClickItem: function(item){
        this.props.changeItem(item);
    },
    render: function(){
        return (
            <div>
                <button onClick={this.onClickItem.bind(this, 'item1')}>item1</button>
                <button onClick={this.onClickItem.bind(this, 'item2')}>item2</button>
            </div>
        )
    }
});
ReactDOM.render(
  <MyContainer />,
  document.getElementById('example')
);

共享数据curItem作为state放在父组件<MyContainer />中，将回调函数changeItem传给<SelectionButtons />用于改变curItem，将curItem传给<List />用于高亮当前被选择的item。

全局事件

本来上面说到的单向传递是可以解决绝大多数时候问题的，但是如果组件的嵌套层级过多，一层层往上调就会显得很麻烦，这个时候可以采用几种方式来解决，第一种就是全局事件。

改变数据的组件发起一个事件，使用数据的组件监听这个事件，在事件处理函数中触发setState来改变视图或者做其他的操作。使用事件实现组件间沟通脱离了单向数据流机制，不用将数据或者回调函数一层一层地传给子组件。

事件模块可以使用如EventEmitter或PostalJS这些第三方库，也可以自己简单实现一个：


var EventEmitter = {
    _events: {},
    //触发事件
    dispatch: function (event, data) {
        if (!this._events[event]) return; // no one is listening to this event
        for (var i = 0; i < this._events[event].length; i++)
            this._events[event][i](data);
    },
    //监听事件
    subscribe: function (event, callback) {
      if (!this._events[event]) this._events[event] = []; // new event
      this._events[event].push(callback);
    },
    //注销事件
    unSubscribe: function(event){
        if(this._events && this._events[event]) {
            delete this._events[event];
        }
    }
}

组件代码如下：

var MyContainer = React.createClass({
    render: function(){
        return (
            <div>
                <CurItemPanel />
                <SelectionButtons/>
            </div>
        )
    }
});
var CurItemPanel = React.createClass({
    getInitialState: function(){
        return {
            curItem: 'item1'
        }
    },
    //挂载成功
    componentDidMount: function(){
        var self = this;
        EventEmitter.subscribe('changeItem', function(newItem){
            self.setState({
                curItem: newItem
            });
        })
    },
    //卸载
    componentWillUnmount: function(){
        EventEmitter.unSubscribe('changeItem');
    },
    render: function(){
        return (
            <p>
                The curItem is:  {this.state.curItem}
            </p>
        )
    }
});
var SelectionButtons = React.createClass({
    onClickItem: function(item){
    //触发事件
        EventEmitter.dispatch('changeItem', item);
    },
    render: function(){
        return (
            <div>
                <button onClick={this.onClickItem.bind(this, 'item1')}>item1</button>
                <button onClick={this.onClickItem.bind(this, 'item2')}>item2</button>
            </div>
        )
    }
});
ReactDOM.render(
  <MyContainer />,
  document.getElementById('example')
);

由于事件是全局的，最好保证在componentWillUnMount中解绑事件，否则，下一次初始化组件时事件可能会绑定多次。

使用事件模型，组件之间无论是父子关系还是非父子关系都可以直接沟通，从而解决了组件间层层回调传递的问题，但是频繁地使用事件实现组件间沟通会使整个程序的数据流向越来越乱，因此，组件间的沟通还是要尽量遵循单向数据流机制。

context

如果我们希望组件直接获取父亲的父亲级的属性，可以直接使用context，而不用一层层的传下来：

var MyContainer = React.createClass({
    getInitialState: function(){
        return {
            curItem: 'item1'
        }
    },
    //验证数据类型，这个必须要
    childContextTypes: {
        curItem: React.PropTypes.any,
        changeItem: React.PropTypes.any
    },
    getChildContext: function(){
        return {
            curItem: this.state.curItem,
            changeItem: this.changeItem
        }
    },
    changeItem: function(item){
        this.setState({
            curItem: item
        });
    },
    render: function(){
        return (
            <div>
                <CurItemWrapper />
                <ListWrapper changeItem={this.changeItem}/>
            </div>
        )
    }
});
var CurItemWrapper = React.createClass({
    render: function(){
        return (
            <div>
                <CurItemPanel />
            </div>
        )
    }
});
//通过this.context.***直接调用祖先级别的属性
var CurItemPanel = React.createClass({
    contextTypes: {
        curItem: React.PropTypes.any
    },
    render: function(){
        return (
            <p>
                The curItem is: {this.context.curItem}
            </p>
        )
    }
});
var ListWrapper = React.createClass({
    render: function(){
        return (
            <div>
                <List />
            </div>
        )
    }
});
var List = React.createClass({
    contextTypes: {
        changeItem: React.PropTypes.any
    },
    //this.context.changeItem祖先级方法
    onClickItem: function(item){
        this.context.changeItem(item);
    },
    render: function(){
        return (
            <ul>
                <li onClick={this.onClickItem.bind(this, 'item1')}>I am item1, click me!</li>
                <li onClick={this.onClickItem.bind(this, 'item2')}>I am item2, click me!</li>
            </ul>
        )
    }
});

简单的的组件沟通可以用传props和callback的方法实现，然而，随着项目规模的扩大，组件就会嵌套得越来越深，这时候使用这个方法就有点不太适合。全局事件可以让组件直接沟通，但频繁使用事件会让数据流动变得很乱。如果兄弟组件共同的父组件嵌套得太深，在这个父组件设置context从而直接传递数据和callback到这两个兄弟组件中。

感悟

组件间通讯的基本方法已经学习，还有一些其他的方法如redux，transdux等框架暂时还没有了解，等到项目中需要用到时再做了解吧。
学习react一段时间后，发现其实有时候还是不方便呢。相信会有更好的组件化解决方案出现。