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';

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

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

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-11-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏谈补锅

WebViewJavascriptBridge源码探究--看OC和JS交互过程

      今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stri...

2355
来自专栏.net core新时代

使用html2canvas实现浏览器截图

  最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员。最终记录的异常信息如下,上面的【截图报告管理员】...

38610
来自专栏圣杰的专栏

ABP入门系列(14)——应用BootstrapTable表格插件

源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)——分页实现讲解了如何进行分页展示,但其分页展示仅适用于前台we...

7335
来自专栏崔庆才的专栏

正则表达式中零宽断言的用法

了解了正则表达式,想必一般情况下的匹配都不会出现什么问题,但是如果一些特殊情况,可能需要用到一些更高级的正则表达式匹配操作,本节我们来说明一下正则表达式的一个较...

2874
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之POI

POI(Point Of Interest),感兴趣点,其实呢,严格意义上说应该不是POI,但是单位就这样叫了,我也就这样叫了,其实现的功能大致是这样的:用过百...

1032
来自专栏程序你好

1000个项目中前10名的JavaScript错误介绍

641
来自专栏向前进

【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示

做项目的时候遇到的问题 1、问题描述   用户在表单某个值输入多个空格,例如:A     B,保存至服务器   在列表查询页面中使用bg-bind的指令单向绑定...

3413
来自专栏技术墨客

React 渲染性能优化

在React内部已经使用了许多巧妙的技术来最小化由于Dom变更导致UI渲染所耗费的时间。对于很多应用来说,使用React后无需太多工作就会让客户端执行性能有质的...

943
来自专栏Modeng的专栏

Vue双向绑定原理,教你一步一步实现双向绑定

当今前端天下以 Angular、React、vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋。

861
来自专栏CaiRui

Python Flask-web表单

Flask-WTF扩展可以把处理web表单的过程变成一种愉悦的体验。 ? 一、跨站请求伪造保护 默认情况下,Flask-WTF能够保护所有表单免受跨站请求伪造的...

3609

扫码关注云+社区

领取腾讯云代金券