React 元件間的通訊示例

前言

從官網上也有介紹元件間如何通訊，但不夠詳細，這裡做個小結，方便對比和回顧

本文內容

處理元件之間的通訊，主要取決於元件之間的關係，因此我們劃分為以下三種：

一、「父元件」向「子元件」傳值

這是最普遍的用法，實現上也非常簡單，主要是利用props來實現

// 父元件

import react from 'react';

import son from './components/son';

class father extends react.component

} render()

}// 子元件

class son extends react.component : )}}

多想一點：

如果元件的巢狀層次太多，那麼從外到內的交流成本就會加深，通過 props 傳值的優勢就不明顯，因此，我們還是要盡可能的編寫結構清晰簡單的元件關係，既也要遵循元件獨立原則，又要適當控制頁面，不可能或極少可能會被單用的**片，可不編寫成乙個子元件

二、「子元件」向「父元件」傳值

我們知道，react的資料控制分為兩種，為 props 和 state；其中，props 如上剛介紹過，它是父元件向子元件傳值時作為儲存引數的資料物件；而 state 是元件存放自身資料的資料物件。這兩者最主要的區別就是，props屬於父元件傳給子元件的唯讀資料，在子元件中不能被修改，而state在自身元件中使用時，可以通過setstate來修改更新。

子元件向父元件傳值，需要控制自己的state，並發起父元件的事件**來通知父元件

// 父元件

import son from './components/son';

class father extends react.component

} onchildchanged() )

} render() )}}

// 子元件

class son extends react.component

} ontextchange() );

// 注意，setstate 是乙個非同步方法，state值不會立即改變，**時要傳快取的當前值，

// 也可以利用傳遞乙個函式(以上傳的是物件)，並傳遞prevstate引數來實現資料的同步更新

this.props.callbackparent(newstate);

} render() : )}}

多想一點：

拓展一點：

在onchange 事件或者其他react事件中，你能獲取以下資訊：

我們知道，react對所有事件的管理都是自己封裝實現的，html中的 onclick 被封裝成了 onclick， onchange 被封裝成了 onchange。從根本上來說，他們都是被繫結在body上的。

多個子元件**同乙個**函式程式設計客棧情況

父元件中大概率包含多個子元件，為節省和簡潔**，遵循 don't repeat yourself 原則，我們會讓乙個**函式實現多個子元件的功能，或多個元件協作完成指定功能

import react from 'react';

import son from './components/son';

class father extends react.componnet

} onchildchangeed() );

} render()

www.cppcns.comoggle me" initialchecked= callbackparent= />)}}

// 子元件

class son extends react.component

} ontextchange() )

// setstate非同步方法問題，注意傳值

this.props.callbackparent(newstate);

} render() : }}}

多想一點：

在本案例中，我們引用了三個 son 子元件，每個 son 元件都獨立工作互不干擾，該例中，增加了乙個 totalchecked 來替代之前的 checked, 當元件觸發ontextchange 後，觸發父元件的**函式使得父元件的值得以改變。

三、元件a和無關係元件b之間的通訊

如果元件之間沒有任何關係，或者元件巢狀的層次比較深，或者，你為了一些元件能夠訂閱，寫入一些訊號，不想讓兩個元件之間插入乙個元件，而是讓兩個元件出於獨立的關係。對於時間系統，有兩個基本操作：

並傳送 send / 觸發 trigger / 發布 publish / 傳送 dispatch 通知那些想要的元件

1. event emitter/target/dispatcher

特點：需要乙個指定的訂閱源

// to subscribe

otherobiect.addeventlistener('clickevent', function() )

// to dispatch

this.dispatchevent('clickevent');

2. publish / subscribe

特點：觸發的時候，不需要指定乙個特定的源，使用全域性物件廣播的方式來處理事件

// to subscribe

globalbroadcaster.subcribe('clickevent', function() )

// to publish

globalbroadcaster.publish('clickevent');

這種方案還有乙個外掛程式可用，即 pubsubjs；用法如下：

import pubsub from 'pubsub-js';

...// to subscribe

pubsub.subscribe('event', (msg, param) => )；

// to publish

pubsub.publish('event', param);

3. single

特點：與event emitter/target/dispatcher類似，但是不要使用隨機字串作為事件觸發的引用。觸發事件的每乙個物件都需要乙個確切的名字，並且在觸發的時候，也必須要指定確切的事件

// to subscribe

otherobject.clicked.add(function() )

// to dispatch

this.clicked.dispatch();

react 團隊使用的是：js-signals 它基於 signals 模式，用起來相當不錯。

事件訂閱與取消

使用react事件的時候，必須關注以下兩個方法:

在 componentdidmount 事件中，等待元件掛載 mounted 完成，再訂閱事件；訂閱的事件需要在元件解除安裝 componentwillunmount 的時候取消事件的訂閱。

因為元件的渲染和銷毀是有 react 來控制的，我們不知道怎麼引用他們，所以eventemitter 模式在處理事件的時候用處不大，pub/sub 模式就好用些，因為我們不需要知道引用在哪。

es6策略： yield and js-csp

es6中有一種傳遞資訊的方式，使用生成函式 generators 和 yield 關鍵字，用法參考以下例子

import csp from 'js-csp';

function* list()

return "done";

}var o = list(1, 2, 3);

var cur = o.next;

while (!cur.done)

結束語資料在元件中應該以什麼樣的方式進行傳遞取決於元件之間存在什麼樣的關係和當時的業務場景需求，大家應該根據專案合理選擇資料處理的方案，這很可能減少你大量的**量和**邏輯。

本文標題: react 元件間的通訊示例

本文位址:

React 元件間的通訊示例

react 元件通訊

React元件通訊

react元件通訊

React 元件間的通訊示例

react 元件通訊

React元件通訊

react元件通訊

相關推薦