詳解React的組件通訊
更新時間：2021年11月09日 16:28:27 作者：捧鮮花的唐老鴨
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
組件通訊介紹
內容
- 組件是獨立且封閉的單元，默認情況下，只能使用組件自己的數據。
- 在組件化過程中，我們將一個完整的功能拆分成多個組件，以更好的完成整個應用的功能。
- 而在這個過程中，多個組件之間不可避免的要共享某些數據
- 為了實現(xiàn)這些功能，就需要打破組件的獨立封閉性，讓其與外界溝通。這個過程就是組件通訊。
三種方式
- 父子組件之間
- 兄弟組件之間
- 跨組件層級
小結
組件中的狀態(tài)是私有的，也就是說，組件的狀態(tài)只能在組件內部使用，無法直接在組件外使用
組件通訊-父傳子
內容：
- 父組件提供要傳遞的state數據
- 給子組件標簽添加屬性，值為 state 中的數據
- 子組件中通過 props 接收父組件中傳遞的數據
核心代碼
父組件提供數據并且傳遞給子組件
class Parent extends React.Component {
state = { lastName: '王' }
render() {
return (
<div>
傳遞數據給子組件：<Child name={this.state.lastName} />
</div>
)
}
}
子組件接收數據
function Child(props) {
return <div>子組件接收到數據：{props.name}</div>
}
組件通訊-子傳父
思路
利用回調函數，父組件提供回調，子組件調用，將要傳遞的數據作為回調函數的參數。
步驟
1.父組件
1.定義一個回調函數f（將會用于接收數據）
2.將該函數f作為屬性的值，傳遞給子組件
2.子組件
1.通過 props 獲取f
2.調用f，并傳入將子組件的數據
核心代碼
父組件提供函數并且傳遞給子組件
class Parent extends React.Component {
state: {
num: 100
}
f = (num) => {
console.log('接收到子組件數據', num)
}
render() {
return (
<div>
子組件：<Child f={this.f} />
</div>
)
}
}
子組件接收函數并且調用
class Child extends React.Component {
handleClick = () => {
// 調用父組件傳入的props，并傳入參數
this.props.f(100)
}
return (
<button onClick={this.handleClick}>點我，給父組件傳遞數據</button>
)
}
小結
子傳父：在子組件中調用從父組件中定義的方法，并根據需要傳入參數
組件通訊-兄弟組件
在React中沒有確定的兄弟組件,就沒有這個說法哈,有的只有狀態(tài)提升.
思路
- 將共享狀態(tài)提升到最近的公共父組件中，由公共父組件管理這個狀態(tài)
- 思想：狀態(tài)提升
- 公共父組件職責：
- 提供共享狀態(tài)
- 提供操作共享狀態(tài)的方法
- 要通訊的子組件只需通過 props 接收狀態(tài)或操作狀態(tài)的方法
核心代碼
parent.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Jack from './Jack'
import Rose from './Rose'
class App extends Component {
// 1. 狀態(tài)提升到父組件
state = {
msg: '',
}
render() {
return (
<div>
<h1>我是App組件</h1>
<Jack say={this.changeMsg}></Jack>
{/* 2. 把狀態(tài)給子組件顯示 */}
<Rose msg={this.state.msg}></Rose>
</div>
)
}
changeMsg = (msg) => {
this.setState({
msg,
})
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById('root'))
Son1.js
import React, { Component } from 'react'
export default class Jack extends Component {
render() {
return (
<div>
<h3>我是Jack組件</h3>
<button onClick={this.say}>說</button>
</div>
)
}
say = () => {
this.props.say('you jump i look')
}
}
Son2.js
import React, { Component } from 'react'
export default class Rose extends Component {
render() {
return (
<div>
<h3>我是Rose組件-{this.props.msg}</h3>
</div>
)
}
}
組件通訊 -跨級組件通訊
想在vue中使用跨級組件通訊,需要使用Context
使用Context的步驟
共三步：
1.導入并調用createContext方法，從結果中解構出 Provider, Consumer 組件
import { createContext } from 'react'
const { Provider, Consumer } = createContext()
2.使用 Provider 組件包裹根組件，并通過 value 屬性提供要共享的數據
return (
<Provider value={ 這里放要傳遞的數據 }>
<根組件的內容/>
</Provider>
)
3.在任意后代組件中，使用第2步中導出的Consumer組件包裹整個組件
return (
<Consumer>
{
（data） => {
// 這里的形參data 就會自動接收Provider中傳入的數據
// console.log(data)
return <組件的內容>
}
}
</Consumer>
)
落地代碼
建立context.js文件
import { createContext } from 'react'
const { Provider, Consumer } = createContext()
export { Consumer, Provider }
改造根組件
import { Provider } from './context'
render () {
return (
<Provider value={{ num: this.state.num }}>
<div>
根組件, num: {this.state.num}
<Parent />
<Uncle />
</div>
</Provider>
)
}
改造后代組件 Uncle.js
import React from 'react'
import { Consumer } from './context'
export default class Uncle extends React.Component {
render () {
return (
<Consumer>
{(data) => {
return <div>我是Uncle組件, {data.num}</div>
}}
</Consumer>
)
}
}
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容！
相關文章
本篇文章主要介紹了ReactJs設置css樣式的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家介紹了React?Virtual?DOM前端框架全面分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了React內部實現(xiàn)cache方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
在現(xiàn)代Web開發(fā)中,React作為一種流行的JavaScript庫,為開發(fā)者提供了一種高效構建用戶界面的方式,條件渲染是React中的一個關鍵概念,本文將深入探討如何在React中實現(xiàn)條件渲染,并通過示例代碼演示常見的用法,需要的朋友可以參考下2025-01-01
react+antd實現(xiàn)動態(tài)編輯表格數據
這篇文章主要為大家詳細介紹了react+antd實現(xiàn)動態(tài)編輯表格數據，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
react-native使用react-navigation進行頁面跳轉導航的示例
本篇文章主要介紹了react-native使用react-navigation進行頁面跳轉導航的示例，具有一定的參考價值，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了React學習之受控組件與數據共享,結合實例形式分析了React受控組件與組件間數據共享相關原理與使用技巧,需要的朋友可以參考下2020-01-01
這篇文章主要為大家介紹了useEvent顯著降低Hooks負擔的原生Hook示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
在編程開發(fā)中，網絡數據請求是必不可少的，這篇文章主要介紹了React網絡請求發(fā)起方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
React中Suspense及l(fā)azy()懶加載及代碼分割原理和使用方式
這篇文章主要介紹了React中Suspense及l(fā)azy()懶加載及代碼分割原理和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09