摘要:對(duì)于事件系統(tǒng),這里有個(gè)基本操作步驟訂閱監(jiān)聽一個(gè)事件通知,并發(fā)送觸發(fā)發(fā)布發(fā)送一個(gè)事件通知那些想要的組件??蠢影?,很好理解在處理事件的時(shí)候,需要注意在事件中,如果組件掛載完成,再訂閱事件當(dāng)組件卸載的時(shí)候,在事件中取消事件的訂閱。
1.父組件傳遞值給子組件
想必這種大家都是知道的吧!都想到了用我們r(jià)eact中的props,那么我在這簡(jiǎn)單的寫了小demo,請(qǐng)看
父組件
class Parent extends Component{ render() { return () } }
子組件
class Child extends Component{ render(){ return (2.子組件傳值給父組件{ this.props.text }
) } }
相必大家在這里估計(jì)得想一想吧!那么由我同樣寫個(gè)小demo來告訴大家,理解了其實(shí)也不難哦
父組件
class Parent extends Component { constructor(props) { super(props); this.state = { someKey: "world" }; } fn(newState) { this.setState({ someKey: newState }); } render() { return (); } }{this.state.someKey}
子組件
class Child extends Component { constructor(props) { super(props); this.state = { newState: "Hello" }; } someFn() { this.props.pfn(this.state.newState);//這里就是傳值給父組件 } render() { return (點(diǎn)我); } }
通過回調(diào)函數(shù)進(jìn)行向父組件傳值,并綁定父組件的this this.fn.bind(this)
3.有任何嵌套關(guān)系的組件之間傳值如果組件之間沒有任何關(guān)系,組件嵌套層次比較深(個(gè)人認(rèn)為 2 層以上已經(jīng)算深了),或者你為了一些組件能夠訂閱、寫入一些信號(hào),不想讓組件之間插入一個(gè)組件,讓兩個(gè)組件處于獨(dú)立的關(guān)系。對(duì)于事件系統(tǒng),這里有 2 個(gè)基本操作步驟:訂閱(subscribe)/監(jiān)聽(listen)一個(gè)事件通知,并發(fā)送(send)/觸發(fā)(trigger)/發(fā)布(publish)/發(fā)送(dispatch)一個(gè)事件通知那些想要的組件。
下面講介紹 3 種模式來處理事件,你能 點(diǎn)擊這里 來比較一下它們。
簡(jiǎn)單總結(jié)一下:
(1) Event Emitter/Target/Dispatcher
特點(diǎn):需要一個(gè)指定的訂閱源
// to subscribe otherObject.addEventListener(‘click’, function() { alert(‘click!’); }); // to dispatch this.dispatchEvent(‘click’);
(2) Publish / Subscribe
特點(diǎn):觸發(fā)事件的時(shí)候,你不需要指定一個(gè)特定的源,因?yàn)樗鞘褂靡粋€(gè)全局對(duì)象來處理事件(其實(shí)就是一個(gè)全局廣播的方式來處理事件)
// to subscribe globalBroadcaster.subscribe(‘click’, function() { alert(‘click!’); }); // to dispatch globalBroadcaster.publish(‘click’);
(3) Signals
特點(diǎn):與Event Emitter/Target/Dispatcher相似,但是你不要使用隨機(jī)的字符串作為事件觸發(fā)的引用。觸發(fā)事件的每一個(gè)對(duì)象都需要一個(gè)確切的名字(就是類似硬編碼類的去寫事件名字),并且在觸發(fā)的時(shí)候,也必須要指定確切的事件。(看例子吧,很好理解)
// to subscribe otherObject.clicked.add(function() { alert(‘click’); }); // to dispatch this.clicked.dispatch();
在處理事件的時(shí)候,需要注意:
在 componentDidMount 事件中,如果組件掛載(mounted)完成,再訂閱事件;當(dāng)組件卸載(unmounted)的時(shí)候,在 componentWillUnmount 事件中取消事件的訂閱。
看了上面所述,是否有所感悟
例如通過事件來進(jìn)行非父子組件間的通信,如果操作不是很多,我們可以自己動(dòng)手簡(jiǎn)單實(shí)現(xiàn)以下哦!
下面我簡(jiǎn)單的寫了一個(gè),請(qǐng)看
簡(jiǎn)單實(shí)現(xiàn)了一下 subscribe 和 dispatch
let EventEmitter = { _events: {}, dispatch: function (event, data) { if (!this._events[event]) { // 沒有監(jiān)聽事件 return; } for (var i = 0; i < this._events[event].length; i++) { this._events[event][i](data); } }, subscribe: function (event, callback) { // 創(chuàng)建一個(gè)新事件數(shù)組 if (!this._events[event]) { this._events[event] = []; } this._events[event].push(callback); } }; otherObject.subscribe("namechanged", (data) => console.log(data.name)); this.dispatch("namechanged", { name: "John" });
是不是現(xiàn)在覺得組件通信其實(shí)也沒那么難懂吧,加油吧,騷年
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/52086.html
摘要:對(duì)于事件系統(tǒng),這里有個(gè)基本操作步驟訂閱監(jiān)聽一個(gè)事件通知,并發(fā)送觸發(fā)發(fā)布發(fā)送一個(gè)事件通知那些想要的組件??蠢影?,很好理解在處理事件的時(shí)候,需要注意在事件中,如果組件掛載完成,再訂閱事件當(dāng)組件卸載的時(shí)候,在事件中取消事件的訂閱。 1.父組件傳遞值給子組件 想必這種大家都是知道的吧!都想到了用我們r(jià)eact中的props,那么我在這簡(jiǎn)單的寫了小demo,請(qǐng)看父組件 class Parent...
摘要:對(duì)于事件系統(tǒng),這里有個(gè)基本操作步驟訂閱監(jiān)聽一個(gè)事件通知,并發(fā)送觸發(fā)發(fā)布發(fā)送一個(gè)事件通知那些想要的組件。看例子吧,很好理解在處理事件的時(shí)候,需要注意在事件中,如果組件掛載完成,再訂閱事件當(dāng)組件卸載的時(shí)候,在事件中取消事件的訂閱。 1.父組件傳遞值給子組件 想必這種大家都是知道的吧!都想到了用我們r(jià)eact中的props,那么我在這簡(jiǎn)單的寫了小demo,請(qǐng)看父組件 class Parent...
摘要:父組件向子組件之間非常常見,通過機(jī)制傳遞即可。我們應(yīng)該聽說過高階函數(shù),這種函數(shù)接受函數(shù)作為輸入,或者是輸出一個(gè)函數(shù),比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候,我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過程中總結(jié)出來的一些經(jīng)驗(yàn)和資源,內(nèi)容邏輯參考了深入react技術(shù)棧一書以及網(wǎng)上的諸多資源,但也并非完全照抄,代碼基本都是自己實(shí)踐,主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...
摘要:父組件向子組件之間非常常見,通過機(jī)制傳遞即可。我們應(yīng)該聽說過高階函數(shù),這種函數(shù)接受函數(shù)作為輸入,或者是輸出一個(gè)函數(shù),比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候,我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過程中總結(jié)出來的一些經(jīng)驗(yàn)和資源,內(nèi)容邏輯參考了深入react技術(shù)棧一書以及網(wǎng)上的諸多資源,但也并非完全照抄,代碼基本都是自己實(shí)踐,主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...
摘要:父組件向子組件之間非常常見,通過機(jī)制傳遞即可。我們應(yīng)該聽說過高階函數(shù),這種函數(shù)接受函數(shù)作為輸入,或者是輸出一個(gè)函數(shù),比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候,我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過程中總結(jié)出來的一些經(jīng)驗(yàn)和資源,內(nèi)容邏輯參考了深入react技術(shù)棧一書以及網(wǎng)上的諸多資源,但也并非完全照抄,代碼基本都是自己實(shí)踐,主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...
閱讀 3998·2021-09-09 09:33
閱讀 1905·2021-09-06 15:14
閱讀 1986·2019-08-30 15:44
閱讀 3164·2019-08-29 18:36
閱讀 3829·2019-08-29 16:22
閱讀 2150·2019-08-29 16:21
閱讀 2623·2019-08-29 15:42
閱讀 1705·2019-08-29 11:00