React組件通信的實(shí)現(xiàn)示例

更新時(shí)間：2023年11月13日 08:36:03 作者：寶子向前沖

在React中,組件通信是一個(gè)重要的概念,它允許不同組件之間進(jìn)行數(shù)據(jù)傳遞和交互，本文主要介紹了React組件通信的實(shí)現(xiàn)示例，感興趣的可以了解一下

組件通信的意義

目標(biāo)任務(wù): 了解為什么需要組件通信

組件是獨(dú)立且封閉的單元，默認(rèn)情況下組件只能使用自己的數(shù)據(jù)（state）

組件化開發(fā)的過程中，完整的功能會(huì)拆分多個(gè)組件，在這個(gè)過程中不可避免的需要互相傳遞一些數(shù)據(jù)

為了能讓各組件之間可以進(jìn)行互相溝通，數(shù)據(jù)傳遞，這個(gè)過程就是組件通信

父子關(guān)系 - 最重要的
兄弟關(guān)系 - 自定義事件模式產(chǎn)生技術(shù)方法 eventBus / 通過共同的父組件通信
其它關(guān)系 - mobx / redux / zustand

父?jìng)髯訉?shí)現(xiàn)

目標(biāo)任務(wù): 實(shí)現(xiàn)父子通信中的父?jìng)髯樱迅附M件中的數(shù)據(jù)傳給子組件

實(shí)現(xiàn)步驟

父組件提供要傳遞的數(shù)據(jù) - state
給子組件標(biāo)簽添加屬性值為 state中的數(shù)據(jù)
子組件中通過 props 接收父組件中傳過來的數(shù)據(jù)
類組件使用this.props獲取props對(duì)象

函數(shù)式組件直接通過參數(shù)獲取props對(duì)象

代碼實(shí)現(xiàn)

 import React from 'react'
 ?
 // 函數(shù)式子組件
 function FSon(props) {
   console.log(props)
   return (
     <div>
       子組件1
       {props.msg}
     </div>
   )
 }
 ?
 // 類子組件
 class CSon extends React.Component {
   render() {
     return (
       <div>
         子組件2
         {this.props.msg}
       </div>
     )
   }
 }
 // 父組件
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <div>
         <div>父組件</div>
         <FSon msg={this.state.message} />
         <CSon msg={this.state.message} />
       </div>
     )
   }
 }
 ?
 export default App

props說明

目標(biāo)任務(wù): 知道props傳遞時(shí)的一些注意事項(xiàng)

1. props是只讀對(duì)象（readonly）

根據(jù)單項(xiàng)數(shù)據(jù)流的要求，子組件只能讀取props中的數(shù)據(jù)，不能進(jìn)行修改

2. props可以傳遞任意數(shù)據(jù)

數(shù)字、字符串、布爾值、數(shù)組、對(duì)象、函數(shù)、JSX

class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <div>
         <div>父組件</div>
         <FSon 
           msg={this.state.message} 
           age={20} 
           isMan={true} 
           cb={() => { console.log(1) }} 
           child={<span>this is child</span>}
         />
         <CSon msg={this.state.message} />
       </div>
     )
   }
 }

子傳父實(shí)現(xiàn)

目標(biāo)任務(wù): 實(shí)現(xiàn)父子通信中的子傳父

口訣： 父組件給子組件傳遞回調(diào)函數(shù)，子組件調(diào)用

實(shí)現(xiàn)步驟

父組件提供一個(gè)回調(diào)函數(shù) - 用于接收數(shù)據(jù)
將函數(shù)作為屬性的值，傳給子組件
子組件通過props調(diào)用回調(diào)函數(shù)
將子組件中的數(shù)據(jù)作為參數(shù)傳遞給回調(diào)函數(shù)

代碼實(shí)現(xiàn)

import React from 'react'
 ?
 // 子組件
 function Son(props) {
   function handleClick() {
     // 調(diào)用父組件傳遞過來的回調(diào)函數(shù) 并注入?yún)?shù)
     props.changeMsg('this is newMessage')
   }
   return (
     <div>
       {props.msg}
       <button onClick={handleClick}>change</button>
     </div>
   )
 }
 ?
 ?
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   // 提供回調(diào)函數(shù)
   changeMessage = (newMsg) => {
     console.log('子組件傳過來的數(shù)據(jù):',newMsg)
     this.setState({
       message: newMsg
     })
   }
   render() {
     return (
       <div>
         <div>父組件</div>
         <Son
           msg={this.state.message}
           // 傳遞給子組件
           changeMsg={this.changeMessage}
         />
       </div>
     )
   }
 }
 ?
 export default App

兄弟組件通信

目標(biāo)任務(wù): 實(shí)現(xiàn)兄弟組件之間的通信

核心思路： 通過狀態(tài)提升機(jī)制，利用共同的父組件實(shí)現(xiàn)兄弟通信

實(shí)現(xiàn)步驟

將共享狀態(tài)提升到最近的公共父組件中，由公共父組件管理這個(gè)狀態(tài)

- 提供共享狀態(tài)
- 提供操作共享狀態(tài)的方法

要接收數(shù)據(jù)狀態(tài)的子組件通過 props 接收數(shù)據(jù)
要傳遞數(shù)據(jù)狀態(tài)的子組件通過props接收方法，調(diào)用方法傳遞數(shù)據(jù)

代碼實(shí)現(xiàn)

 import React from 'react'
 ?
 // 子組件A
 function SonA(props) {
   return (
     <div>
       SonA
       {props.msg}
     </div>
   )
 }
 // 子組件B
 function SonB(props) {
   return (
     <div>
       SonB
       <button onClick={() => props.changeMsg('new message')}>changeMsg</button>
     </div>
   )
 }
 ?
 // 父組件
 class App extends React.Component {
   // 父組件提供狀態(tài)數(shù)據(jù)
   state = {
     message: 'this is message'
   }
   // 父組件提供修改數(shù)據(jù)的方法
   changeMsg = (newMsg) => {
     this.setState({
       message: newMsg
     })
   }
 ?
   render() {
     return (
       <>
         {/* 接收數(shù)據(jù)的組件 */}
         <SonA msg={this.state.message} />
         {/* 修改數(shù)據(jù)的組件 */}
         <SonB changeMsg={this.changeMsg} />
       </>
     )
   }
 }
 ?
 export default App

跨組件通信Context

目標(biāo)任務(wù): 了解Context機(jī)制解決的問題和使用步驟

上圖是一個(gè)react形成的嵌套組件樹，如果我們想從App組件向任意一個(gè)下層組件傳遞數(shù)據(jù)，該怎么辦呢？目前我們能采取的方式就是一層一層的props往下傳，顯然很繁瑣

那么，Context 提供了一個(gè)無需為每層組件手動(dòng)添加 props，就能在組件樹間進(jìn)行數(shù)據(jù)傳遞的方法

實(shí)現(xiàn)步驟

1- 創(chuàng)建Context對(duì)象導(dǎo)出 Provider 和 Consumer對(duì)象

 const { Provider, Consumer } = createContext()

2- 使用Provider包裹上層組件提供數(shù)據(jù)

<Provider value={this.state.message}>
     {/* 根組件 */}
 </Provider>

3- 需要用到數(shù)據(jù)的組件使用Consumer包裹獲取數(shù)據(jù)

 <Consumer >
     {value => /* 基于 context 值進(jìn)行渲染 */}
 </Consumer>

代碼實(shí)現(xiàn)

import React, { createContext }  from 'react'
 ?
 // 1. 創(chuàng)建Context對(duì)象 
 const { Provider, Consumer } = createContext()
 ?
 ?
 // 3. 消費(fèi)數(shù)據(jù)
 function ComC() {
   return (
     <Consumer >
       {value => <div>{value}</div>}
     </Consumer>
   )
 }
 ?
 function ComA() {
   return (
     <ComC/>
   )
 }
 ?
 // 2. 提供數(shù)據(jù)
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <Provider value={this.state.message}>
         <div className="app">
           <ComA />
         </div>
       </Provider>
     )
   }
 }
 ?
 export default App

到此這篇關(guān)于React組件通信的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)React組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: