React 組件通信方式

来源:https://www.cnblogs.com/hubert-style/archive/2023/12/06/17879764.html
-Advertisement-
Play Games

人生的游戲不在於拿了一副好牌,而在於怎樣去打好壞牌,世上沒有常勝將軍,勇於超越自我者才能得到最後的獎盃。 1. 父子組件通信方式 1.1 父組件傳遞到子組件 直接通過屬性進行傳遞,數據的傳遞可以提高組件的復用性。 1.2 子組件傳遞到父組件 通過回調函數(callback)來實現。 ref 標記:父 ...


人生的游戲不在於拿了一副好牌,而在於怎樣去打好壞牌,世上沒有常勝將軍,勇於超越自我者才能得到最後的獎盃。

1. 父子組件通信方式

1.1 父組件傳遞到子組件

直接通過屬性進行傳遞,數據的傳遞可以提高組件的復用性。

1.2 子組件傳遞到父組件

  • 通過回調函數(callback)來實現。

  • ref 標記:父組件拿到子組件的引用,從而調用子組件的方法和訪問子組件的狀態。

2. 非父子組件通信方式

2.1 狀態提升(中間人模式)

React 中的狀態提升概括來說,就是將多個組件需要共用的狀態提升到它們最近的父組件上。在父組件上改變這個狀態然後通過 props 分發給子組件。本質上也是通過父子通信來實現。

應用場景:兄弟組件之間通信方式。不至於很複雜。

2.2 發佈訂閱模式

發佈訂閱模式思想:調度中心有一個訂閱者集合,訂閱者往調度中心註冊訂閱(一個回調方法),發佈者調用調度中心提供的發佈方法即可發佈,發佈方法中依次調用訂閱者註入的回調。

10. 訂閱發佈模式

// 調度中心
var EventBus = {
  // 訂閱者集合
  subscribeList: [],

  // 訂閱
  subscribe(callback) {
    this.subscribeList.push(callback)
  },

  // 發佈
  publish(context) {
    this.subscribeList.map(callback=>{
      callback && callback(context)
    })
  }
}

// 訂閱者
EventBus.subscribe((context)=>{
  console.log("訂閱者1收到:", context)
})

EventBus.subscribe((context)=>{
  console.log("訂閱者2收到:", context)
})

// 發佈者
EventBus.publish("男人看了沉默...")

2.3 context 狀態樹傳參

思想:React 官方提供的解決方法,採用生產者消費者這種模式。

哪些子組件需要通信,在他們共有的父組件身上包裝一個 Provider (供應商)組件,供應商組件是通過 React.createContext 方法創建出來的。 成為供應商組件,得提供服務。消費者享受服務。如果一個消費者改變服務,另一個消費者受到影響。

定義全局 context 對象:

const GlobalContext = React.createContext()
export default GlobalContext

定義供應商組件 Provide(生產者):

export default class App extends Component {
  render() {
    return (
      <div>
        <GlobalContext.Provider value={
          {
            name: "hubert",
            change: ()=>{ 
              // 通過狀態修改更新 
            }
          }
        }>
        {/* 組件內容 */}
        </GlobalContext.Provider>
      </div>
    )
  }
}

定義消費者組件 Consumer(消費者):

class Customer extends Component {
  render() {
    return (
      <GlobalContext.Customer>
        {
          (value)=>{
            {/* 這裡 value 值就是提供的服務 */}
          }
        }
      </GlobalContext.Customer>
    )
  }
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文分享自華為雲社區《GaussDB資料庫SQL系列-SQL與ETL淺談》,作者:Gauss松鼠會小助手2。 一、前言 在SQL語言中,ETL(抽取、轉換和載入)是一種用於將數據從源系統抽取到目標系統的過程。ETL過程通常包括三個階段:抽取(Extract)、轉換(Transform)和載入(Loa ...
  • 數據作為新時代重要的生產要素之一,數據資產化的相關工作正在提速。自今年10月1日起,中國資產評估協會制定的《數據資產評估指導意見》正式施行。同時,《企業數據資源相關會計處理暫行規定》近期轉為正式稿,也將於明年1月1日起施行。 《暫行規定》規定:企業使用的數據資源,符合《企業會計準則第6號——無形資產 ...
  • 解耦、削峰:傳統的方式上游發送數據下游需要實時接收,如果上游在某些業務場景:例如上午十點會流量激增至頂峰,那麼下游資源可能會扛不住壓力。但如果使用消息隊列,就可以將消息暫存在消息管道中,下游可以按照自己的速度逐步處理; ...
  • 大數據框架下,常用的數據更新策略有三種: COW: copy-on-write, 寫時複製; MOR: merge-on-read, 讀時合併; MOW: merge-on-write, 寫時合併; hudi等數據湖倉框架,常用的是前兩種實現數據更新。而Doris則主要用後兩種更新數據。 COW 在 ...
  • 資料庫關係模型是數據組織的核心,以關係為基礎,表達實體和實體關係。關係模型通過域、笛卡爾積、關係模式構建二維表,形成資料庫。完整性約束確保數據有效性,實體完整性、參照完整性和用戶定義完整性保證數據質量。關係操作包括基本操作和數據語言,而關係代數提供了強大的查詢手段。資料庫關係模型為信息管理提供了結構... ...
  • 單體架構下鎖的實現方案 1. ReentrantLock全局鎖 ReentrantLock(可重入鎖),指的是一個線程再次對已持有的鎖保護的臨界資源時,重入請求將會成功。 簡單的與我們常用的Synchronized進行比較: ReentrantLock Synchronized 鎖實現機制 依賴AQ ...
  • 大家好,我是獨孤風,從本周開始,爭取每周為大家帶來一個優秀的開源項目推薦。 開源項目不僅促進了技術的發展和普及,還為全球範圍內的開發者和用戶社區建立了一個共用知識、協作和創新的平臺。站在巨人的肩膀上才能看的更遠,我們平時也應該多多關註開源項目,不僅學習其豐富的知識,也要找機會為開源事業做出自己的貢獻 ...
  • 實現原理是使用TWEEN.Tween實現動畫效果 實現 汽車模型載入 使用Promise編寫模型的非同步載入方法 參數position是汽車初始位置,參數rotation是汽車初始朝向 Car.prototype.loadCar = function (position, rotation) { le ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...