在运用 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 等，运用这些东西使得组件间的通讯更轻易追踪和治理。
作者：Charleylla
链接：
https://www.jianshu.com/p/fb9…泉源：简书
简书著作权归作者一切，任何情势的转载都请联络作者取得受权并说明出处。
