React 组件之间的通讯

dongxiawu 发布于2019-08-23 16:59 / 2293人阅读

摘要：父组件声明自己支持父组件提供一个函数，用来返回相应的对象子组件声明自己需要使用我胡汉三又回来了点击我如果是父组件向子组件单向通信，可以使用变量，如果子组件想向父组件通信，同样可以由父组件提供一个回调函数，供子组件调用，回传参数。

在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：

父组件向子组件通信

子组件向父组件通信

跨级组件之间通信

非嵌套组件间通信

下面依次说下这几种通信方式。

父组件向子组件通信

这是最简单也是最常用的一种通信方式：父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理。

下面是演示代码：

父组件 App.js：

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{

    render(){
        return(
            
                
        )
    }
}

子组件 SubComponent.js：

import React from "react";

const Sub = (props) => {
    return(
        
            { props.title }
        
    )
}

export default Sub;

子组件向父组件通信

利用回调函数，可以实现子组件向父组件通信：父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，便可以向父组件通信。

下面是演示代码：

SubComponent.js：

import React from "react";

const Sub = (props) => {
    const cb = (msg) => {
        return () => {
            props.callback(msg)
        }
    }
    return(
        
            
        
    )
}

export default Sub;

App.js：

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{
    callback(msg){
        console.log(msg);
    }
    render(){
        return(
            
                
        )
    }
}

跨级组件通信

所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信。跨级组件通信可以采用下面两种方式：

中间组件层层传递 props

使用 context 对象

对于第一种方式，如果父组件结构较深，那么中间的每一层组件都要去传递 props，增加了复杂度，并且这些 props 并不是这些中间组件自己所需要的。不过这种方式也是可行的，当组件层次在三层以内可以采用这种方式，当组件嵌套过深时，采用这种方式就需要斟酌了。

使用 context 是另一种可行的方式，context 相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样一来，不管嵌套有多深，都可以随意取用。

使用 context 也很简单，需要满足两个条件：

上级组件要声明自己支持 context，并提供一个函数来返回相应的 context 对象

子组件要声明自己需要使用 context

下面以代码说明，我们新建 3 个文件：父组件 App.js，子组件 Sub.js，子组件的子组件 SubSub.js。

App.js：

import React, { Component } from "react";
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";

export default class App extends Component{
    // 父组件声明自己支持 context
    static childContextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }

    // 父组件提供一个函数，用来返回相应的 context 对象
    getChildContext(){
        return{
            color:"red",
            callback:this.callback.bind(this)
        }
    }

    callback(msg){
        console.log(msg)
    }

    render(){
        return(
            
                
            
        );
    }
}

Sub.js：

import React from "react";
import SubSub from "./SubSub";

const Sub = (props) =>{
    return(
        
            
        
    );
}

export default Sub;

SubSub.js：

import React,{ Component } from "react";
import PropTypes from "prop-types";

export default class SubSub extends Component{
    // 子组件声明自己需要使用 context
    static contextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }
    render(){
        const style = { color:this.context.color }
        const cb = (msg) => {
            return () => {
                this.context.callback(msg);
            }
        }
        return(
            
                SUBSUB
                
            
        );
    }
}

如果是父组件向子组件单向通信，可以使用变量，如果子组件想向父组件通信，同样可以由父组件提供一个回调函数，供子组件调用，回传参数。

在使用 context 时，有两点需要注意：

父组件需要声明自己支持 context，并提供 context 中属性的 PropTypes

子组件需要声明自己需要使用 context，并提供其需要使用的 context 属性的 PropTypes

父组件需提供一个 getChildContext 函数，以返回一个初始的 context 对象

如果组件中使用构造函数（constructor），还需要在构造函数中传入第二个参数 context，并在 super 调用父类构造函数是传入 context，否则会造成组件中无法使用 context。

...
constructor(props,context){
  super(props,context);
}
...

改变 context 对象

我们不应该也不能直接改变 context 对象中的属性，要想改变 context 对象，只有让其和父组件的 state 或者 props 进行关联，在父组件的 state 或 props 变化时，会自动调用 getChildContext 方法，返回新的 context 对象，而后子组件进行相应的渲染。

修改 App.js，让 context 对象可变：

import React, { Component } from "react";
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";

export default class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            color:"red"
        };
    }
    // 父组件声明自己支持 context
    static childContextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }

    // 父组件提供一个函数，用来返回相应的 context 对象
    getChildContext(){
        return{
            color:this.state.color,
            callback:this.callback.bind(this)
        }
    }

    // 在此回调中修改父组件的 state
    callback(color){
        this.setState({
            color,
        })
    }

    render(){
        return(
            
                
            
        );
    }
}

此时，在子组件的 cb 方法中，传入相应的颜色参数，就可以改变 context 对象了，进而影响到子组件：

...
return(
    
        SUBSUB
        
    
);
...

context 同样可以应在无状态组件上，只需将 context 作为第二个参数传入：

import React,{ Component } from "react";
import PropTypes from "prop-types";

const SubSub = (props,context) => {
    const style = { color:context.color }
    const cb = (msg) => {
        return () => {
            context.callback(msg);
        }
    }

    return(
        
            SUBSUB
            
        
    );
}

SubSub.contextTypes = {
    color:PropTypes.string,
    callback:PropTypes.func,
}

export default SubSub;

非嵌套组件间通信

非嵌套组件，就是没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件，可以采用下面两种方式：

利用二者共同父组件的 context 对象进行通信

使用自定义事件的方式

如果采用组件间共同的父级来进行中转，会增加子组件和父组件之间的耦合度，如果组件层次较深的话，找到二者公共的父组件不是一件容易的事，当然还是那句话，也不是不可以...
这里我们采用自定义事件的方式来实现非嵌套组件间的通信。

我们需要使用一个 events 包：

npm install events --save

新建一个 ev.js，引入 events 包，并向外提供一个事件对象，供通信时使用：

import { EventEmitter } from "events";
export default new EventEmitter();

App.js：

import React, { Component } from "react";

import Foo from "./Foo";
import Boo from "./Boo";

import "./App.css";

export default class App extends Component{
    render(){
        return(
            
                
                
            
        );
    }
}

Foo.js：

import React,{ Component } from "react";
import emitter from "./ev"

export default class Foo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            msg:null,
        };
    }
    componentDidMount(){
        // 声明一个自定义事件
        // 在组件装载完成以后
        this.eventEmitter = emitter.addListener("callMe",(msg)=>{
            this.setState({
                msg
            })
        });
    }
    // 组件销毁前移除事件监听
    componentWillUnmount(){
        emitter.removeListener(this.eventEmitter);
    }
    render(){
        return(
            
                { this.state.msg }
                我是非嵌套 1 号
            
        );
    }
}

Boo.js：

import React,{ Component } from "react";
import emitter from "./ev"

export default class Boo extends Component{
    render(){
        const cb = (msg) => {
            return () => {
                // 触发自定义事件
                emitter.emit("callMe","Hello")
            }
        }
        return(
            
                我是非嵌套 2 号
                
            
        );
    }
}

自定义事件是典型的发布/订阅模式，通过向事件对象上添加监听器和触发事件来实现组件间通信。

总结

本文总结了 React 中组件的几种通信方式，分别是：

父组件向子组件通信：使用 props

子组件向父组件通信：使用 props 回调

跨级组件间通信：使用 context 对象

非嵌套组件间通信：使用事件订阅

事实上，在组件间进行通信时，这些通信方式都可以使用，区别只在于使用相应的通信方式的复杂程度和个人喜好，选择最合适的那一个。比如，通过事件订阅模式通信不止可以应用在非嵌套组件间，还可以用于跨级组件间，非嵌套组件间通信也可以使用 context 等。关键是选择最合适的方式。
当然，自己实现组件间的通信还是太难以管理了，因此出现了很多状态管理工具，如 flux、redux 等，使用这些工具使得组件间的通信更容易追踪和管理。

作者：Charleylla 
链接：https://www.jianshu.com/p/fb9... 
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

GPU云服务器云服务器内部服务器之间的通讯组件之间通信两个服务器之间通讯父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103620.html

React组件模型启示录

摘要：另一种关于组件的常见说法，是组件是为了重用。这件事情是前端特有的，受限制于的结构。这一节的题目叫做混乱的组件通讯，我们来仔细掰扯一下细节，因为组件模型虽然很常说但是对通讯过程没有约定。这个话题很难写。但是反过来说，爱因斯坦有句名言：如果你不能把一个问题向一个六岁孩子解释清楚，那么你不真的明白它。所以解释清楚一个问题的关键，不是去扩大化，而是相反，最小化。 Lets begin. ...

eternalshallow 2019-08-20 17:52 评论0 收藏0
react开发教程（八）React组件通信

摘要：父子组件通讯通讯手段这是最常见的通信方式，父组件只需要将子组件需要的传给子组件，子组件直接通过来使用。父子组件通讯通讯手段这是最常见的通信方式，父组件只需要将子组件需要的props传给子组件，子组件直接通过this.props来使用。通讯内容更多要提的是如何合理的设置子组件的props，要想将子组件设计成一个复用性强的通用组件，需要将能够复用的部分抽象出来，抽象出来的props有两...

kamushin233 2019-08-21 11:51 评论0 收藏0
掌握react，这一篇就够了

摘要：小明小明儿子，可以看到组件显示了父组件的。小明受控组件和非受控组件受控组件和非受控组件这些都是指的表单组件，当一个表单的值是通过改变的而不是通过是受控组件，否则就是非受控组件。 react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。本文就带大家一起掌握react。 jsx语法前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx...

Enlightenment 2019-08-23 11:45 评论0 收藏0
用Redux来进行组件间通讯

摘要：用来进行组件间通讯地址疑惑之前在做项目的时候，一直会遇到一个困扰我的问题，两个互相独立的子组件如何通讯假设现在结构如下是一个组件，里面有一个删除操作，点击添加备注时会弹出模态框，让用户进行填写。用Redux来进行组件间通讯 demo地址疑惑之前在做项目的时候，一直会遇到一个困扰我的问题，两个互相独立的子组件如何通讯？假设现在结构如下 showImg(https://segmen...

lemanli 2019-08-20 14:24 评论0 收藏0