React 中组件间通信的几种方式-阿里云开发者社区

开发者社区> 技术小阿哥> 正文

React 中组件间通信的几种方式

简介:
+关注继续查看

在使用 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(            
                <div>
                <Sub title = "今年过节不收礼" />
            </div>
        )
    }
}

子组件 SubComponent.js:

import React from "react";
const Sub = (props) => {    
                return(       
                 <h1>
                { props.title }  
            </h1>
    )
}
export default Sub;

子组件向父组件通信

利用回调函数,可以实现子组件向父组件通信:父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数,便可以向父组件通信。
下面是演示代码:
SubComponent.js:

import React from "react";
const Sub = (props) => {  
  const cb = (msg) => {  
        return () => {
            props.callback(msg)
        }
    }    
    return(        
            <div>
            <button onClick = { cb("我们通信把") }>点击我</button>
        </div>
    )
}
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(          
                  <div>
                <Sub callback = { this.callback.bind(this) } />
            </div>
        )
    }
}

跨级组件通信

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

  • 中间组件层层传递 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(           
             <div>
                <Sub></Sub>
            </div>
        );
    }
}

Sub.js:

import React from "react";
import SubSub from "./SubSub";
const Sub = (props) =>{   
         return(        
               <div>
            <SubSub />
        </div>
    );
}
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(    
                     <div style = { style }>
                        SUBSUB               
                 <button onClick = { cb("我胡汉三又回来了!") }>点击我</button>
            </div>
        );
    }
}

如果是父组件向子组件单向通信,可以使用变量,如果子组件想向父组件通信,同样可以由父组件提供一个回调函数,供子组件调用,回传参数。
在使用 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(  
            <div>
                <Sub></Sub>
            </div>
        );
    }
}

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

...
return(   
     <div style = { style }>
        SUBSUB  
       <button onClick = { cb("blue") }>点击我</button>
    </div>);
...

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(     
                   <div style = { style }>
               SUBSUB         
            <button onClick = { cb("我胡汉三又回来了!") }>点击我</button>
        </div>
    );
}

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(         
            <div>
                <Foo />
                <Boo />
            </div>
        );
    }
}

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(          
              <div>
                { this.state.msg }
                我是非嵌套 1 号       
               </div>
        );
    }
}

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(    
                <div>
                我是非嵌套 2 号            
                <button onClick = { cb("blue") }>点击我</button>
            </div>
        );
    }
}

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

总结

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

  • 父组件向子组件通信:使用 props

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

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

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

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

完。


原地址链接:https://www.jianshu.com/p/fb915d9c99c4

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于webpack Code Splitting实现react组件的按需加载
随着web应用功能越来越复杂,模块打包后体积越来越大,如何实现静态资源的按需加载,最大程度的减小首页加载模块体积和首屏加载时间,成为模块打包工具的必备核心技能。 webpack作为当下最为流行的模块打包工具,成为了react、vue等众多热门框架的官方推荐打包工具。其提供的Code Splitting(代码分割)特性正是实现模块按需加载的关键方式。 # 什么是Code Splitt
7724 0
Django的Content-Type组件
一、需求 现在我们有这样一个需求~我们的商城里有很多的商品,节日要来了,我们要搞活动。那么我们就要设计优惠券,优惠券都有什么类型呢,满减的、折扣的、立减的。
1000 0
React源码分析5 -- 组件通信,refs,key,ReactDOM
React源码系列文章,请多支持: [React源码分析1 — 组件和对象的创建(createClass,createElement)](https://www.atatech.org/articles/72905) [React源码分析2 — React组件插入DOM流程](http://www.atatech.org/articles/72908) [React源码分析3 — React
3641 0
推荐React组件库
国外的 Material UI使用 Google's Material Design 的设计风格 国内的 Antd 阿里出品的组件库 ...
709 0
《Kinect应用开发实战:用最自然的方式与机器对话》一2.2 Kinect传感器的硬件组成
本节书摘来自华章出版社《Kinect应用开发实战:用最自然的方式与机器对话》一书中的第2章,第2.2节,作者 余涛,更多章节内容可以访问云栖社区“华章计算机”公众号查看
2571 0
编写 React 组件的最佳实践
本文讲的是编写 React 组件的最佳实践,当我一开始写 React 的时候,我记得有许多不同的方法来写组件,每个教程都大不相同。虽然从那以后 React 框架已经变得相当的成熟,但似乎仍然没有一种明确的写组件的“正确”方式。
1229 0
React 中的 定义组件的 两种方式
React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(props) { return Hello, {props.name} } 因为Welcome函数接受单个携带数据的props对象并且返回一个React元素,所以它就是一个组件。
901 0
13694
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载