React & Vue的組件通訊

組件之間的通訊是面試中極爲常見的問題，也是在實際工做中會常常遇到的問題，因此今天來總結一下關於組件通訊方面的知識點。

父子組件通訊

父 -> 子

Vue

• props: 父組件向子組件傳遞數據，同時能夠限制傳遞數據的類型。
• ref: 父組件訪問子組件的實例，能夠調用子組件的屬性和方法。

React

• props: 父組件向子組件傳遞數據，也能夠是一個方法。

注： 雖然能夠經過ref來獲取子組件的實例或DOM，可是在實際項目中，並不推薦這樣作。React和Vue優化的本質就是經過操做虛擬DOM，來避免操做真實DOM，提升性能。而使用ref違背了這樣的初衷。

子 -> 父

Vue

• $emit('funcName', data): 子組件派發一個事件，父組件監聽該事件。

子組件中：
this.$emit('hello', 'helloWorld');
父組件中：
<child @hello="sayHello" />
複製代碼

React

• 調用父組件的函數： 在react中，能夠經過props將父組件的函數，傳遞給子組件，當子組件想要通知父組件的時候，就調用父組件的函數。（不一樣與vue，react是單向數據流驅動）

// 父組件
<Child hello={this.hello} />

// 子組件
static propsTypes = {
    hello: Proptypes.func
}

render() {
    return {
     <button onClick={this.props.hello}>hello</button>
    }
}
複製代碼

兄弟組件通訊

Vue

• 經過共同父輩組件實現。

// 兄弟組件1
this.$parent.$on('hello',handle);
// 兄弟組件2
this.$parent.$emit('hello')
複製代碼

React

• 經過共同父輩組件(狀態提高) 兄弟組件A狀態改變，經過調用共同父組件的函數，通知父組件。以後父組件再將兄弟組件A的信息經過props傳遞給兄弟組件B。

// 父組件
 <A setValue={this.setValue}/>
 <B value={this.state.value} /> 複製代碼

隔代組件通訊

祖先 -> 後代

Vue

• provide/inject：可以實現祖先給後代傳值。

// 祖先組件
provide() {
    return {hello: 'hello'}
}
// 後代組件
inject: ['hello']
複製代碼

React

• context 在react16以後的版本，從新定義了context的使用方法。因此在這裏，咱們就直接介紹新的版本中，如何使用context

// React.createContext 建立Context對象的API
const StatusContext = React.createContext({
    disabled: false
});

// 祖先組件
 <StatusContext.Provider value={{disabled: true}}>
      <Children />
 </StatusContext.Provider>
 
// 後代組件
<StatusContext.Consumer>
        {context => (
          <button disabled={context.disabled}>
            hello
          </button>
        )}
</StatusContext.Consumer>
複製代碼

注：

• Consumer組件的子組件必須是一個函數的形式，經過參數拿到context。
• 在react的官方文檔中，提醒開發者要當心使用Context，可是在高階組件或者React狀態管理中,Context會常常被說起和使用。

後代 -> 祖先

對於後代向祖先之間的通訊，其實vue和react採用的方法本質上是同樣的，都是子組件一級一級向上通知。不一樣vue的實現相比於react的要簡單的多。

// 後代組件
function dispatch(eventName, data){
    let parent = this.$parent
    while (parent) {
        parent.$emit(eventName,data)
        parent = parent.$parent
    }
}
<button @click="dispatch('hello', 'hello,world')">
    {{ msg }}
</button>

// 祖先組件
this.$on('hello', this.sayHello)
複製代碼

任意組件中的通訊

Vue

• 事件總線$Bus

// main.js
Vue.prototype.$bus = new Bus()
// 組件A
this.$bus.$on('hello', handle)
// 組件B
this.$bus.$emit('hello')
複製代碼

事件總線的方式雖然能夠實現任意組件中的通訊，可是在實際開發中，使用的很是少。由於當項目較大時，可能會涉及到不少組件中的通訊，使用$bus，會讓你的代碼很是雜亂。

• vuex

React

• mobx
• redux: 不一樣與vuex對vue的高度依賴，redux並不依賴於react，可是redux上手比較複雜，因此如今不少公司選擇使用mobx。

以上就是React和Vue中常見的組件通訊，若是有錯誤的地方，但願各位大神多多指正。