专栏首页互联网杂技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';

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

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

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS模块与命名空间的介绍

    起因 将代码组织到类中的一个重要原因是让代码更加“模块化”,可以在很多不同的场景中实现代码的重用。但类不是唯一的模块化代码的方式。 一般来讲,模块是一个独立的J...

    前朝楚水
  • nodejs+ftp+linux+nginx 自动部署前端

    原理就是利用 1.nodes中ftp模板,上传本地的前端文件到服务器指定目录; 2.在服务器上安装nginx已经搭建了ftp服务 下面就是详细步骤: 1.lin...

    前朝楚水
  • express中app.use和app.get的区别及解析

    写在前面:最近研究nodejs及其web框架express,对app.use和app.get没理解清,以致踩了坑浪费不少时间,我根据自己实践及总结出此博客,若有...

    前朝楚水
  • 华为利用AI将面部表情转化为声音

    世界卫生组织估计约有13亿人患有近视,多达2.17亿人有或轻或重的远距视力问题。这些损伤不仅使日常琐事变得复杂,例如遛狗和检查邮件,它们也会使人难以接受情绪暗示...

    AiTechYun
  • 小程序在父组件执行子组件方法,可适用于下拉刷新上拉加载之后执行子组件方法

    当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法...

    蓓蕾心晴
  • 正则表达式背后的秘密——详解 LeetCode 第十题

    今天的任务首先要回顾下昨天刷的 LeetCode 第十题,同时,也想做一番尝试:把刷题笔记写的更丰富、可读性更强些,同时也整理些算法上的总结,以此锻炼下自己整理...

    TTTEED
  • R-概率统计与模拟(二)

    前文《R-概率统计与模拟》介绍了一些用 R 进行概率模拟的实验,本文继续上次的工作,并在此过程中回顾一些相关的概率统计知识。

    一只羊
  • Flutter 构建完整应用手册-列表 顶

    显示数据列表是移动应用程序的基本模式。 Flutter包含ListView部件,使列表变得轻而易举!

    南郭先生
  • react-native flatlist 上拉加载onEndReached方法频繁触发的问题

    mcq
  • RavenDb学习(四)处理文档相关性

    RavenDb是文档型数据库,但是我们常常也需要定义对象之间的关系,那RavenDb当中是如何处理的呢? RavenDb提供了优雅的解决方式,使用正确的话,可以...

    岑玉海

扫码关注云+社区

领取腾讯云代金券