React組件之間的8種通訊方式

2021-01-18 小象Web開發

在 React 社區,遇到最多的其中一個問題是「不同組件之間如何相互通訊」。

在網上搜索了一些答案之後,早晚會有人提到 Flux,隨後問題來了:「怎麼用Flux解決通訊問題?Flux是必須的嗎?」。

有時候 Flux 能解決組件通訊的問題,不過它不是必須的。在本文中我們將介紹幾種通訊方式,這裡沒有用到 Flux。

首先要說明要選擇哪種通訊策略完全取決於要通訊的組件之間的關係。

下表展示了這幾種通訊方式,你可以根據項目實際情況選擇對應的方式。

1.Props

Props 是目前為止最常用的方式,用於在組件之間傳遞信息。用 props 可以把數據從父組件傳遞到它的子組件中。

Props 是 React 的核心功能,也是 React 的基礎知識。如果還不熟悉的話,需要訪問官網閱讀相關文檔。

2.實例方法

在父組件中可以用 refs 引用子組件,之後就可以調用子組件的實例方法了。這是另一種從父組件訪問子組件的方式。

3.回調函數

方法 1 和 2 介紹了如何把數據從父組件傳給子組件,如果反過來傳值如何做呢?如何把數據從子組件傳給它的父組件?

最簡單的方式是在父組件中傳遞一個函數給子組件,子組件可以使用這個函數來把數據傳給它的父組件。

在父組件中可以這樣把一個函數作為屬性傳給子組件,例如:

然後子組件可以這樣調用這個函數:

最後不要忘記在子組件的 propTypes 中聲明這個函數:

4.事件冒泡

事件冒泡並非 React 的概念,而是瀏覽器中 DOM 的事件機制。和回調函數類似,它也可以把數據從子組件發送到父組件。

當你想在父組件中捕獲來自子組件中的 DOM 事件時,可以採用此方法。

在上述代碼中,點擊子組件中的 div 元素之後,在瀏覽器的控制臺可以看到輸出了這個 div 元素。這是因為我們在父組件中定義的事件監聽器成功監聽到了來自子組件冒泡上來的 click 事件。

5.父組件

如果兩個需要通訊的組件,它們擁有共同的父級組件,我們可以使用上述的策略組合,只是需要使用父級組件作為溝通的媒介,把數據作為父組件的 state 和方法來定義。

6.觀察者模式

觀察者模式是一種軟體設計模式,一個對象可以在需要時發送數據到多個其他對象。

這種方式適用於所有組件,不需要時父子組件或者平級組件。

一般的做法是在 componentDidMount() 裡訂閱事件,在 componentWillUnmount() 裡取消訂閱,然後在接收事件時調用 setState() 方法。

網上有許多庫實現了觀察者模式,例如 PubSubJS,EventEmitter等。

7.全局變量

一般來說,使用全局變量不是最佳實踐。不過它很實用,可以幫你節省大量時間。如果謹慎使用是完全沒問題的。

建議定義全局變量時用 window. 明確定義,以後管理維護時會更加方便。在一個組件的生命周期或者事件監聽器裡設置 window.x 全局變量,然後在其他組件裡就可以用 window.x 讀取它了。

8.Context

Context 和 props 類似,不過它不是為單個子組件傳遞數據,它可以為整個子樹提供數據。

Context 只可以在樹中向下傳遞數據(父組件到子樹)。可以配合回調函數來向上傳遞數據(子樹到父組件)。

典型的可以使用 Context 的場景有在組件樹中傳遞已登錄的用戶信息,首選語言,或主題。不過需要注意不要濫用它,因為那樣會讓組件的重用變得更加困難。

更多信息可以訪問 React 官方文檔。

相關焦點

  • 精通react/vue組件設計之配合React Portals實現一個(Drawer)組件
    通過組件的設計過程,大家會接觸到一個完成健壯的組件設計思路和方法,也能在實現組件的過程逐漸對react/vue的高級知識和技巧有更深的理解和掌握,並且在企業實際工作做遊刃有餘.作為數據驅動的領導者react/vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.
  • 《精通react/vue組件設計》之實現一個健壯的警告提示(Alert)組件
    其他業務類型所以我們在設計組件系統的時候可以參考如上分類去設計,該分類也是antd, element, zend等主流UI庫的分類方式.正文在開始組件設計之前希望大家對css3和js有一定的基礎,並了解基本的react/vue語法.我們先看看實現後的組件效果:1. 組件設計思路按照之前筆者總結的組件設計原則,我們第一步是要確認需求.
  • 《精通react/vue組件設計》之快速實現一個可定製的進度條組件
    每日一學: 組件設計三原則高內聚, 低耦合(尤其是vue/react組件中, 降低組件之間的耦合尤為重要)組件邊界劃分清晰(每一個組件都有自己清晰的邊界劃分)單一職責(props屬性)可以很快的實現多個不同的表現和重用.我將會使用react帶大家實現這個進度條組件, 大家不用擔心技術棧不一樣,因為react實現的組件可以很快套用於vue項目中, 所以說底層原理非常重要.
  • 精通react/vue組件設計之實現一個Tag(標籤)和Empty(空狀態)組件
    "辛勤勞動",而是要根據已有前端的開發經驗,總結出一套自己的高效開發的方法.作為數據驅動的領導者react/vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.所以, 為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫
  • React.js 性能分析
    Profiler 接受一個 onRender 回調函數,當被追蹤的組件以及子代組件發生更新時,該函數就會被調用。下圖是在影片排期應用中使用 Profiler 追蹤各個組件渲染:import { unstable_Profiler as Profiler } from "react";import { render } from "react-dom";
  • React 靈魂 23 問,你能答對幾個?
    8、為什麼虛擬dom 會提高性能?虛擬dom 相當於在 JS 和真實 dom 中間加了一個緩存,利用 diff 算法避免了沒有必要的 dom 操作,從而提高性能。9、錯誤邊界是什麼?它有什麼用?在 React 中,如果任何一個組件發生錯誤,它將破壞整個組件樹,導致整頁白屏。
  • 雲音樂 React Native 體系建設與發展
    廢棄組件RN0.6 版本移除了 2 個組件:Listview 和 navigator-ios。對於這種情況,如果我們用新組件比如 FlatList 重寫,不僅需要理解原來業務邏輯,還要修改源碼,重新測試。所以針對這種情況,團隊採取措施是:不改動現有代碼,從舊版本抽取對應組件。
  • 使用React、Electron、Dva、Webpack、Node.js、Websocket快速構建跨平臺應用
    webpack感覺每周都在偷偷更新,很糟心啊,還有Angular更新到了8,Vue馬上又要出正式新版本了,5G今年就要商用,華為的系統也要出來了,RN還沒有更新到正式的1版本,還有號稱讓前端開發者失業的技術flutter也在瘋狂更新,前端真的是學不完的。
  • 精通React/Vue系列之帶你實現一個功能強大的通知提醒框
    那麼我們如何實現這樣的調用方式呢?基於react實現一個通知提醒框(Notification)通知框的API調用實現思路其實就是通過jsx動態渲染約定好的標籤,然後通過ReactDom的Render API將dom渲染到指定容器內掛載到頁面,其中要想實現Notification.info這樣的方式還需要考慮到創建實例的問題,我們應該使用單例模式來控制實例的創建個數。
  • 鼎通科技IPO:技術建立產品優勢 通訊連接器組件推動業績高增
    作為一家專注於通訊連接器精密組件和汽車連接器精密組件研發、生產及銷售的高新技術企業,鼎通科技在近年中取得了較為良好的業績增長態勢。通訊連接器組件實現營收高增,連接器產品水平廣受國內外認可鼎通科技產品可分為包括通訊連接器組件和汽車連接器組件的連接器組件,以及包括精密模具和模具零件的模具產品。
  • ReactNative動畫研究與實踐
    本次文章的題目為《ReactNative動畫研究與實踐》,既然叫研究,那我們就爭取一次將RN動畫相關的內容都說清楚,提出問題-論證問題-解決問題的方式來研究
  • 我讀完了React的API,並為新手送上了一些建議
    更重要的是,React 是一個由 Jordan Walke 創建的 Facebook 開源項目,這個項目由一些頗具野心的年輕開發人員主導——其中包括 Dan Abramov,他經常會隱晦地解釋這個庫背後的理念,(社交)媒體上關於 React 的話題幾乎都能找到他的身影;還有 Brain Vaughn,他從圖形設計領域轉向了編程工作,構建了 react-virtualized
  • Vue3 & React Hooks 新UI組件原理:Modal 彈窗
    然後又無意間刷到「Portal」,才知道Modal的實現還有如此妙的方式,順而想著乾脆把UI組件庫的實現原理看完。常見的Modal模態框、Dialog對話框、Notification通知框等都是最最常用的交互方式。
  • 【英】新版 React DevTools 簡介
    react-domreact-nativeHow do I get the new DevTools?React DevTools is available as an extension for Chrome and Firefox.
  • 這可能是最通俗的 React Fiber 打開方式
    如果讀者在大學認真學過作業系統原理, 你可以很快理解以下幾種單處理器進程調度策略(我就隨便科普一下,算送的, 如果你很熟悉這塊,可以跳過):0️⃣ 先到先得(First-Come-First-Served, FCFS)這是最簡單的調度策略, 簡單說就是沒有調度
  • 前端組件/庫打包利器rollup使用與配置實戰
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫目前主流的前端框架vue和react都採用rollup來打包,為了探索rollup的奧妙,接下來就讓我們一步步來探索,並基於rollup搭建一個庫打包腳手架,來發布自己的庫和組件。
  • React Native痛點解析之性能調優
    優化切換動畫卡頓的問題:使用API InteractionManager,它的作用就是可以使本來JS的一些操作在動畫完成之後執行,這樣就可確保動畫的流程性。當然這是在延遲執行為代價上來獲得幀數的提高。使用後可以直接使用一下的寫法達到我們之前的目的(即使是對象都可以完美的做比較)。修改後代碼如下:
  • 【Hooks】:[組]Awesome React Hooks
    /medium.com/@dispix/from-react-component-to-hooks-b50241334365React Hooks: What's going to happen to my tests?
  • 弱電工程中rs485正確的接線方式與485總線常見通訊故障
    RS485有兩線制和四線制兩種接線,四線制只能實現點對點的通信方式,現很少採用,現在多採用的是兩線制接線方式,這種接線方式為總線式拓樸結構在同一總線上最多可以掛接32個結點。 485總線的通訊距離可以達到1200米。根據485總線結構理論,在理想環境的前提下,485總線傳輸距離可以達到1200米。
  • 終於有人把常用的三種通訊方式:RS485、RS232、RS422講明白了
    我們都知道,在一般情況下我們會使用串口進行通訊,但是這種串口只適合連接2個設備之間,因此存在很多不方便之處(比如我們進行一對多的通訊),制約了串行數據的收發,這個時候我們就可能需要用到485通訊協議。除了RS485以外,常見的還有RS232和RS422。