詳解React中組件之間通信的方式
一、是什么
我們將組件間通信可以拆分為兩個詞：
- 組件
- 通信
回顧Vue系列的文章，組件是vue中最強大的功能之一，同樣組件化是React的核心思想
相比vue，React的組件更加靈活和多樣，按照不同的方式可以分成很多類型的組件
而通信指的是發(fā)送者通過某種媒體以某種格式來傳遞信息到收信者以達到某個目的，廣義上，任何信息的交通都是通信
組件間通信即指組件通過某種方式來傳遞信息以達到某個目的
二、如何通信
組件傳遞的方式有很多種，根據(jù)傳送者和接收者可以分為如下：
- 父組件向子組件傳遞
- 子組件向父組件傳遞
- 兄弟組件之間的通信
- 父組件向后代組件傳遞
- 非關系組件傳遞
父組件向子組件傳遞
由于React的數(shù)據(jù)流動為單向的，父組件向子組件傳遞是最常見的方式
父組件在調用子組件的時候，只需要在子組件標簽內傳遞參數(shù)，子組件通過props屬性就能接收父組件傳遞過來的參數(shù)
function EmailInput(props) {
return (
<label>
Email: <input value={props.email} />
</label>
);
}
const element = <EmailInput email="123124132@163.com" />;
子組件向父組件傳遞
子組件向父組件通信的基本思路是，父組件向子組件傳一個函數(shù)，然后通過這個函數(shù)的回調，拿到子組件傳過來的值
父組件對應代碼如下：
class Parents extends Component {
constructor() {
super();
this.state = {
price: 0
};
}
getItemPrice(e) {
this.setState({
price: e
});
}
render() {
return (
<div>
<div>price: {this.state.price}</div>
{/* 向子組件中傳入一個函數(shù) */}
<Child getPrice={this.getItemPrice.bind(this)} />
</div>
);
}
}
子組件對應代碼如下：
class Child extends Component {
clickGoods(e) {
// 在此函數(shù)中傳入值
this.props.getPrice(e);
}
render() {
return (
<div>
<button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
<button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
</div>
);
}
}
兄弟組件之間的通信
如果是兄弟組件之間的傳遞，則父組件作為中間層來實現(xiàn)數(shù)據(jù)的互通，通過使用父組件傳遞
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {count: 0}
}
setCount = () => {
this.setState({count: this.state.count + 1})
}
render() {
return (
<div>
<SiblingA
count={this.state.count}
/>
<SiblingB
onClick={this.setCount}
/>
</div>
);
}
}
父組件向后代組件傳遞
父組件向后代組件傳遞數(shù)據(jù)是一件最普通的事情，就像全局數(shù)據(jù)一樣
使用context提供了組件之間通訊的一種方式，可以共享數(shù)據(jù)，其他數(shù)據(jù)都能讀取對應的數(shù)據(jù)
通過使用React.createContext創(chuàng)建一個context
const PriceContext = React.createContext('price')
context創(chuàng)建成功后，其下存在Provider組件用于創(chuàng)建數(shù)據(jù)源，Consumer組件用于接收數(shù)據(jù)，使用實例如下：
Provider組件通過value屬性用于給后代組件傳遞數(shù)據(jù)：
<PriceContext.Provider value={100}>
</PriceContext.Provider>
如果想要獲取Provider傳遞的數(shù)據(jù)，可以通過Consumer組件或者或者使用contextType屬性接收，對應分別如下：
class MyClass extends React.Component {
static contextType = PriceContext;
render() {
let price = this.context;
/* 基于這個值進行渲染工作 */
}
}
Consumer組件：
<PriceContext.Consumer>
{ /*這里是一個函數(shù)*/ }
{
price => <div>price：{price}</div>
}
</PriceContext.Consumer>
非關系組件傳遞
如果組件之間關系類型比較復雜的情況，建議將數(shù)據(jù)進行一個全局資源管理，從而實現(xiàn)通信，例如redux。關于redux的使用后續(xù)再詳細介紹
三、總結
由于React是單向數(shù)據(jù)流，主要思想是組件不會改變接收的數(shù)據(jù)，只會監(jiān)聽數(shù)據(jù)的變化，當數(shù)據(jù)發(fā)生變化時它們會使用接收到的新值，而不是去修改已有的值
因此，可以看到通信過程中，數(shù)據(jù)的存儲位置都是存放在上級位置中
到此這篇關于React中組件之間通信的方式的文章就介紹到這了,更多相關React組件之間通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在React中,state 是一個用于存儲組件內部數(shù)據(jù)的特殊對象,每個React組件都可以包含自己的state,我們往往是通過修改state的值來驅動React重新渲染組件,這篇文章主要介紹了React中state屬性,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了React.js前端導出Excel的方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
使用 React Router Dom 實現(xiàn)路由導航的詳細過程
React Router Dom 是 React 應用程序中用于處理路由的常用庫,它提供了一系列組件和 API 來管理應用程序的路由,這篇文章主要介紹了使用 React Router Dom 實現(xiàn)路由導航,需要的朋友可以參考下2024-03-03
React?useEffect不支持async?function示例分析
這篇文章主要為大家介紹了React?useEffect不支持async?function示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
React視頻播放控制組件Video Controls的實現(xiàn)
本文主要介紹了React視頻播放控制組件Video Controls的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-02-02
React手寫簽名組件react-signature實現(xiàn)簽字demo
這篇文章主要為大家介紹了React手寫簽名組件react-signature實現(xiàn)簽字demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了JavaScript中rem布局在react中的應用 的相關資料,需要的朋友可以參考下2015-12-12
錯誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯誤,并打印這些錯誤,同時展示降級UI,而并不會渲染那些發(fā)生崩潰的子組件樹2023-01-01
props?是?React?組件通信最重要的手段，它在?React?的世界中充當?shù)慕巧鞘种匾?。學好?props?可以使組件間通信更加靈活，同時文中會介紹一些?props?的操作技巧，和學會如何編寫嵌套組件2022-10-10
在 React 開發(fā)里,組件可分為受控組件和非受控組件,這篇文章將為大家介紹一下它們的實現(xiàn)原理,方法,區(qū)別,作用和應用場景是什么,希望對大家有所幫助2025-03-03