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
相關文章
- React中元件通訊的幾種方式React元件
- React中元件間通訊的方式React元件
- 程式間的幾種通訊方式
- 幾種程式間的通訊方式
- React中元件之間通訊的方式React元件
- Vue元件之間通訊的三種方式Vue元件
- React 《元件間通訊》React元件
- React - 元件之間的通訊React元件
- Vue 元件間的通訊方式Vue元件
- 什麼是程式間通訊?Linux程式間通訊有幾種方式?Linux
- 程式間通訊是什麼?Linux程式間通訊有幾種方式?Linux
- T面試題:程式間的通訊方式有哪幾種?面試題
- Vue中元件間通訊的方式Vue元件
- 程式間的8種通訊方式
- React的6種通訊方式(附帶例子)React
- Android開啟多程式及程式間通訊的幾種方式Android
- React之元件(component)之間的通訊React元件
- Vue3 的8種元件通訊方式Vue元件
- “React元件間通訊”學習筆記React元件筆記
- React Components之間的通訊方式瞭解下React
- React元件通訊React元件
- React 元件通訊React元件
- 程式間的五種通訊方式介紹
- iOS App間常用的五種通訊方式iOSAPP
- 幾種常見的Vue元件間的傳參方式Vue元件
- Vue中元件通訊的幾種方法(Vue3的7種和Vue2的12種元件通訊)Vue元件
- react 路由的幾種使用方式React路由
- React.js 中的元件通訊問題ReactJS元件
- React: 關於React通訊方式React
- react元件通訊通識篇React元件
- Windows程式間各種通訊方式淺談Windows
- Vue元件通訊方式Vue元件
- vue中兄弟之間元件通訊Vue元件
- Linux程式間通訊有幾種方式?這8個你都知道嗎?Linux
- 程式間的五種通訊方式介紹-詳解
- Linux程式間通訊的6種不同方式Linux
- Vue 元件間的通訊Vue元件
- Vue元件間的通訊Vue元件