React入門0x012: 組件通信

Tonny 發(fā)布于2019-08-23 11:38 / 2759人閱讀

摘要：可以看到，父級更新了，子組件也同步更新了，也就完成了父組件向子組件發(fā)起通信的目的。當然我們也可以通過適當?shù)慕M件設(shè)計來避免過深的組件嵌套通信。所以這就解決了遠程組件通信深度組件嵌套的問題。組件間通信可以選擇像這樣的庫來處理。

0x000 概述

這一章講組件間通信，組件通信分為很多種：

父組件向子組件發(fā)起通信

子組件向父組件發(fā)起通信

兄弟組件間通訊

遠程組件通信

在組件通信中，有一種錯誤的說法，那就是父組件調(diào)用子組件，子組件調(diào)用父組件，這種說法其實是錯誤的，并沒有什么父組件調(diào)用子組件，這是一種傳統(tǒng)的說法，從傳統(tǒng)dom的操作方式來的，但是在react中，使用這種方法描述組件間的通信是不合適的。在我看來，用事件通知模型來描述可能更合適。

0x001 父組件向子組件發(fā)起通信

父組件向子組件發(fā)起通信很簡單，直接使用props

import React from "react"
import ReactDom from "react-dom"

class Sub extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 0
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            num: nextProps.num
        })
    }

    render() {
        return 
            props.num:{this.props.num}
            state.num:{this.state.num}
        
    }
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 0
        }
        setInterval(() => {
            this.setState({
                num: ++this.state.num
            })
        }, 1000)

    }

    render() {
        return _{}
}

ReactDom.render(
    ,
    document.getElementById("app")
)}

查看瀏覽器：

說明：App組件每秒更新一次num，同時將num通過props傳遞給子組件Sub，Sub通過props訪問父級傳遞下來的num，并渲染到界面上，同時也將該參數(shù)保存到自己的state中，也渲染到界面上?？梢钥吹剑讣壐铝?b>num，子組件也同步更新了，也就完成了父組件向子組件發(fā)起通信的目的。

0x002 子組件向父組件發(fā)起通信

子組件向父組件發(fā)起通信則是通過事件觸發(fā)，我們可以想想平時的html：

我們給button綁定了click事件，所以當我們點擊按鈕的時間，該事件就會被觸發(fā)，然后執(zhí)行我們的函數(shù)ourFunc并傳遞參數(shù)"you click me"，這就是事件通知?，F(xiàn)在我們假設(shè)button是我們實現(xiàn)的自定義組件，那么onclick就是我們傳遞的props。眾所周知，js中，函數(shù)也是變量，所以在react中，props也可以傳遞函數(shù)：

import React from "react"
import ReactDom from "react-dom"

class MyButton extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 0
        }
    }

    handleOnClick() {
        let num = ++this.state.num
        this.setState({
            num: num
        })
        this.props.onClick(num)
    }

    render() {
        return 
    }
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 0
        }
    }

    render() {
        return 
            點擊了 {this.state.num} 次
             this.handleOnClick(text)}/>
        
    }

    handleOnClick(num) {
        this.setState({
            num: num
        })
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

查看瀏覽器：

說明：我們聲明了一個MyButton組件，并傳遞了兩個屬性，一個是text，一個是onClick，注意，這里的onClick只是一個名字叫做onClick的屬性，而不是點擊事件，只是我們借用了這個名字而已，真正的點擊事件必須綁定在dom上。所以這里叫什么名字都無所謂，不過為了好看，還是叫著名字比較好。
在MyButton中，我們真正的綁定了onClick事件，并在該事件觸發(fā)的時候，調(diào)用傳遞過來的props.onClick，并吧點擊的次數(shù)作為參數(shù)，這樣，App的handleOnClick就會被促發(fā)，同時接收到num參數(shù)，用于顯示用戶的點擊次數(shù)。
從表面上看，我們就好像在MyButton上綁定了事件一般，和web中的十分類似，但是這種機制更加的靈活，比如我們不一定要叫onClick，我們可以將之和業(yè)務(wù)綁定，叫做onUserAdd，這樣，似乎就實現(xiàn)了自定義事件，并且具有一定的業(yè)務(wù)特點，非常的靈活。

0x003 兄弟組件通信

兄弟組件通信其實很簡單，借助公共的父組件作為中間橋梁，然后通過上面說的props和事件機制，就完成了兄弟組件的通信，
稍微修改一下0x002的栗子就可以搞定了

class MyView extends React.Component {
    render() {
        return 點擊了 {this.props.num} 次
    }
}

class MyButton extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 0
        }
    }

    handleOnClick() {
        let num = ++this.state.num
        this.setState({
            num: num
        })
        this.props.onClick(num)
    }

    render() {
        return 
    }
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 0
        }
    }

    render() {
        return 
            
             this.handleOnClick(text)}/>
        
    }

    handleOnClick(num) {
        this.setState({
            num: num
        })
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

查看瀏覽器：

說明：MyButton和MyView是掛載在App的子組件，他們是同級的兄弟組件，而他們之間的通信可以借助App作為中轉(zhuǎn)，將數(shù)據(jù)從一個MyButton傳遞到MyView。具體過程：

MyButton點擊事件觸發(fā)后觸發(fā)父組件傳遞進來的onClick

App監(jiān)聽MyButton的onClick事件并將該事件的num保存到自己的state中

而state.num又傳遞到了MyView中

所以當我們點擊按鈕的時候，點擊次數(shù)就增加了。

0x004 遠程組件通信

從上克制，組件間的通信可以通過props傳遞普通變量和函數(shù)來實現(xiàn)，但是如果事件嵌套的層級太深，這套模型就顯得麻煩，必須要不斷的傳遞props，不但冗余而且不好維護。
當然我們也可以通過適當?shù)慕M件設(shè)計來避免過深的組件嵌套通信。
那如果無法避免呢？
那就需要用其他方式來實現(xiàn)了，比如，使用訂閱-發(fā)布模型可以實現(xiàn)無視距離和組件的通信，甚至無視框架和位置，但是很容易引起混亂，適用于全局通知。
以下是簡單實現(xiàn)：

實現(xiàn)通用的訂閱-發(fā)布模型框架

let eventMap = {}

class MyEvent {

    static pub(name, data) {
        if (!eventMap.hasOwnProperty(name)) return
        let callbacks = eventMap[name]
        if (callbacks.length === 0) return
        callbacks.forEach((callback) => {
            callback(data)
        })


    }

    static sub(name, callback) {
        let callbacks = []
        if (eventMap.hasOwnProperty(name)) {
            callbacks = eventMap[name]
        }
        callbacks.push(callback)
        eventMap[name] = callbacks
    }
}

export default MyEvent

該框架只有兩個方法，和一個事件隊列，pub用來發(fā)布一個事件，sub用來訂閱一個事件，調(diào)用pub發(fā)布一個事件以后，sub了該事件的方法就會被執(zhí)行

MyEvent.sub("EventA",(data)=>{console.log(data)})
MyEvent.pub("EventA",{num:1})
// 查看控制臺
{num:1}

編寫組件

const EVENT_BUTTON_CLICK = "EVENT_BUTTON_CLICK"

class MyView extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 0
        }
        MyEvent.sub(EVENT_BUTTON_CLICK, (num) => {
            this.setState({
                num: num.num
            })
        })

    }

    render() {
        return 點擊了 {this.state.num} 次
    }
}

class MyButton extends React.Component {

    constructor() {
        super()
        this.state = {
            num: 0
        }
    }

    handleOnClick() {
        let num = ++this.state.num
        this.setState({
            num: num
        })
        MyEvent.pub(EVENT_BUTTON_CLICK, {num: num})
    }

    render() {
        return 
    }
}

class App extends React.Component {
    constructor() {
        super()
    }

    render() {
        return 
            
            
        
    }


}

ReactDom.render(
    ,
    document.getElementById("app")
)

可以看到，我們使用的是發(fā)布-訂閱模型，并沒有通過父組件來做兄弟組件的傳遞中介，沒有太多的props嵌套。所以這就解決了遠程組件通信、深度組件嵌套的問題。當然也帶來了另一個問題，那就是事件維護。如果事件太多，將會導(dǎo)致無法維護和流程混亂......不可亂用，可用于系統(tǒng)的中心事件控制，也就是單一的事件源輸出。

組件間通信可以選擇像redux這樣的庫來處理。

0x005 資源

react

源碼

GPU云服務(wù)器云服務(wù)器組件和組件通信組件通信組件之間通信父子組件通信

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97250.html

發(fā)表評論

登陸后可評論

0條評論

Tonny

男|高級講師

我要關(guān)注我要私信

TA的文章

Pandas與openpyxl庫的超強結(jié)合，再見，Excel！

閱讀 1379·2021-09-10 10:51
[譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色

閱讀 2841·2019-08-30 15:54
ie下帶滾動條容器background屬性和border屬性的bug

閱讀 3380·2019-08-29 17:11
前端每日實戰(zhàn)：135# 視頻演示如何用純 CSS 創(chuàng)作一個懸停時右移的按鈕特效

閱讀 944·2019-08-29 16:44
這么多前端優(yōu)化點你都記得住嗎？

閱讀 1405·2019-08-29 13:47
元素實現(xiàn)絕對居中的三種方法

閱讀 1096·2019-08-29 13:47
理解CSS浮動與清理

閱讀 1499·2019-08-29 12:23
理解 BFC (Block Formatting Model)

閱讀 1055·2019-08-28 18:18

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React入門0x012: 組件通信

相關(guān)文章

**es6基礎(chǔ)0x012：Map**

React 入門學習筆記整理目錄

本命年一定要記得穿紅褲衩：2015年總結(jié)

本命年一定要記得穿紅褲衩：2015年總結(jié)

發(fā)表評論

0條評論

Tonny

男|高級講師

TA的文章

Pandas與openpyxl庫的超強結(jié)合，再見，Excel！

[譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色

ie下帶滾動條容器background屬性和border屬性的bug

前端每日實戰(zhàn)：135# 視頻演示如何用純 CSS 創(chuàng)作一個懸停時右移的按鈕特效

這么多前端優(yōu)化點你都記得住嗎？

元素實現(xiàn)絕對居中的三種方法

理解CSS浮動與清理

理解 BFC (Block Formatting Model)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React入門0x012: 組件通信

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！