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 等，使用這些工具使得元件間的通訊更容易追蹤和管理。
作者：Charleylla
連結：https://www.jianshu.com/p/fb9...
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。