React -- 组件间通信-蒲公英云

React -- 组件间通信

分为三种类型的通信关系：
1、父组件向子组件通信
2、子组件向父组件通信
3、没有嵌套关系的组件之间的通信

父组件向子组件通信

父组件通过子组件的props向子组件传递需要的信息。

子组件向父组件通信

两种方法：
1、利用回调函数
2、利用自定义事件机制

一个栗子：

ListItem类：

class ListItem extends Component {  
    static defaultProps = {
        text: '',
        checked: false, 
    }
    render() { 
        return (
            <li>
                <input type="checkbox" checked={
   this.props.checked}
                onChange={
   this.props.onChange} /> <span>{
   this.props.value}</span>
            </li> 
        );
    } 
}

List类：

class List extends Component {  
    static defaultProps = {
        list: [], 
        handleItemChange: () => {},
    };
    constructor(props) { 
        super(props);
        this.state = {
            list: this.props.list.map(entry => ({
            text: entry.text,
            checked: entry.checked, 
        })),
    }; 
}
    onItemChange(entry) {
        const { list } = this.state;
        this.setState({
            list: list.map(prevEntry => ({
            text: prevEntry.text,
            checked: prevEntry.text === entry.text ?
                !prevEntry.checked : prevEntry.checked, 
            })),
        });
        this.props.handleItemChange(entry); 
    }
    render() { 
        return (
            <div> 
                <ul>
                    {this.state.list.map((entry, index) => ( 
                        <ListItem
                            key={`list-${index}`}
                            value={entry.text}
                            checked={entry.checked} 
                            onChange={this.onItemChange.bind(this, entry)}
                        /> 
                    ))}
                </ul> 
            </div>
        ); 
    }
}

在这个栗子中，用的是回调函数的方法：在List组件中写入了handleItemChange方法，当ListItem发生变化的时候，我们就可以通过这个方法拿到数据了。

跨级组件通信

可以像前文那样，使用层层传递的props，但是这样代码会十分冗余。除了这个方法之外，我们可以使用context来实现跨级通信。

示例代码：

ListItem:

class ListItem extends Component {  
    static contextTypes = {
        color: PropTypes.string,
    };
    render() {
        const { value } = this.props;
        return (
            <li style={
   {background: this.context.color}}>
                <span>{value}</span> 
            </li>
        ); 
    }
}

List:

class List extends Component {  
    static childContextTypes = {
        color: PropTypes.string,
    };
    getChildContext() { 
        return {
            color: 'red', 
        };
    }
    render() {
        const { list } = this.props;
        return ( 
            <div>
                <ListTitle title={title} /> 
                <ul>
                    {
   list.map((entry, index) => (
                        <ListItem key={`list-${index}`} value={entry.text} />
                    ))}
                </ul>
            </div> 
        );
    } 
}

在这个栗子中，我们并没有给ListItem传递props，而是在父组件中定义了ChildContext，这样，从这一层开始的子组件都能拿到定义的context，例如本例中的color。

实际上，context一直存在于React源码中，但是，React官方并不建议大量使用context，因为尽管它可以减少逐层传递，但是，当组件结构复杂的时候，我们就并不知道context是从哪一层里传过来的。

大部分情况下，我们并不推荐使用context。使用context比较好的场景是真正意义上的全局信息且不会被更改：比如界面主题和用户信息等。

如果我们真的需要它，那么建议写成高阶组件来实现。有关高阶组件的内容，将会在后面的章节中进行介绍。

没有嵌套关系的组件通信

没有嵌套关系的组件，那只能通过一种可以影响全局的方式来考虑。
比如，刚才提到的自定义事件机制。

我们在处理时间的时候需要注意，在componentDidMount事件中，如果组件挂载完成，再订阅事件；当组件卸载的时候，需要在componentWillUnmount中取消事件的订阅。

栗子：

组件1:

class App extends Component { 
    componentDidMount() {
        this.itemChange = emitter.on('ItemChange', (data) => { console.log(data); }); } componentWillUnmount() { emitter.removeListener(this.itemChange); } render() { return ( <List list={[{text: 1}, {text: 2}]} /> ); } }

组件2的onItemChange方法:

onItemChange(entry) {
    const { list } = this.state;
    this.setState({
        list: list.map(prevEntry => ({
            text: prevEntry.text,
            checked: prevEntry.text === entry.text ?
                !prevEntry.checked : prevEntry.checked, 
        }))
    });
    emitter.emit('ItemChange', entry); 
}

本例采用的是发布／订阅的方式。借用Node.js Events模块的浏览器版实现，在代码中需要加入：

import { EventEmitter } from 'events'; 
export default new EventEmitter();
/**********把EventEmitter输出到组件中使用************/
import ReactDOM from 'react-dom';
import React, { Component, PropTypes } from 'react'; import emitter from './events';