React -- 组件间通信

╰半橙微兮° 2022-06-13 00:30 225阅读 0赞

分为三种类型的通信关系：  
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';

总结：一般情况下，组件之间的通信应该尽可能的保持简洁，如果说出现了多级传递活着跨级传递时，一般需要首先重新审视下是否有更合理的方式。

上面这个栗子利用全局对象来保存事件，用广播的方式来处理事件，这样的设计方法很常见，但是也容易带来逻辑的混乱。