[转] 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 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。