React 組件之間的通訊

dongxiawu 發(fā)布于2019-08-23 16:59 / 2320人閱讀

摘要：父組件聲明自己支持父組件提供一個(gè)函數(shù)，用來(lái)返回相應(yīng)的對(duì)象子組件聲明自己需要使用我胡漢三又回來(lái)了點(diǎn)擊我如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個(gè)回調(diào)函數(shù)，供子組件調(diào)用，回傳參數(shù)。

在使用 React 的過(guò)程中，不可避免的需要組件間進(jìn)行消息傳遞（通信），組件間通信大體有下面幾種情況：

父組件向子組件通信

子組件向父組件通信

跨級(jí)組件之間通信

非嵌套組件間通信

下面依次說(shuō)下這幾種通信方式。

父組件向子組件通信

這是最簡(jiǎn)單也是最常用的一種通信方式：父組件通過(guò)向子組件傳遞 props，子組件得到 props 后進(jìn)行相應(yīng)的處理。

下面是演示代碼：

父組件 App.js：

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{

    render(){
        return(
            
                
        )
    }
}

子組件 SubComponent.js：

import React from "react";

const Sub = (props) => {
    return(
        
            { props.title }
        
    )
}

export default Sub;

子組件向父組件通信

利用回調(diào)函數(shù)，可以實(shí)現(xiàn)子組件向父組件通信：父組件將一個(gè)函數(shù)作為 props 傳遞給子組件，子組件調(diào)用該回調(diào)函數(shù)，便可以向父組件通信。

下面是演示代碼：

SubComponent.js：

import React from "react";

const Sub = (props) => {
    const cb = (msg) => {
        return () => {
            props.callback(msg)
        }
    }
    return(
        
            
        
    )
}

export default Sub;

App.js：

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{
    callback(msg){
        console.log(msg);
    }
    render(){
        return(
            
                
        )
    }
}

跨級(jí)組件通信

所謂跨級(jí)組件通信，就是父組件向子組件的子組件通信，向更深層的子組件通信?？缂?jí)組件通信可以采用下面兩種方式：

中間組件層層傳遞 props

使用 context 對(duì)象

對(duì)于第一種方式，如果父組件結(jié)構(gòu)較深，那么中間的每一層組件都要去傳遞 props，增加了復(fù)雜度，并且這些 props 并不是這些中間組件自己所需要的。不過(guò)這種方式也是可行的，當(dāng)組件層次在三層以內(nèi)可以采用這種方式，當(dāng)組件嵌套過(guò)深時(shí)，采用這種方式就需要斟酌了。

使用 context 是另一種可行的方式，context 相當(dāng)于一個(gè)全局變量，是一個(gè)大容器，我們可以把要通信的內(nèi)容放在這個(gè)容器中，這樣一來(lái)，不管嵌套有多深，都可以隨意取用。

使用 context 也很簡(jiǎn)單，需要滿足兩個(gè)條件：

上級(jí)組件要聲明自己支持 context，并提供一個(gè)函數(shù)來(lái)返回相應(yīng)的 context 對(duì)象
子組件要聲明自己需要使用 context

下面以代碼說(shuō)明，我們新建 3 個(gè)文件：父組件 App.js，子組件 Sub.js，子組件的子組件 SubSub.js。

App.js：

import React, { Component } from "react";
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";

export default class App extends Component{
    // 父組件聲明自己支持 context
    static childContextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }

    // 父組件提供一個(gè)函數(shù)，用來(lái)返回相應(yīng)的 context 對(duì)象
    getChildContext(){
        return{
            color:"red",
            callback:this.callback.bind(this)
        }
    }

    callback(msg){
        console.log(msg)
    }

    render(){
        return(
            
                
            
        );
    }
}

Sub.js：

import React from "react";
import SubSub from "./SubSub";

const Sub = (props) =>{
    return(
        
            
        
    );
}

export default Sub;

SubSub.js：

import React,{ Component } from "react";
import PropTypes from "prop-types";

export default class SubSub extends Component{
    // 子組件聲明自己需要使用 context
    static contextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }
    render(){
        const style = { color:this.context.color }
        const cb = (msg) => {
            return () => {
                this.context.callback(msg);
            }
        }
        return(
            
                SUBSUB
                
            
        );
    }
}

如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個(gè)回調(diào)函數(shù)，供子組件調(diào)用，回傳參數(shù)。

在使用 context 時(shí)，有兩點(diǎn)需要注意：

父組件需要聲明自己支持 context，并提供 context 中屬性的 PropTypes

子組件需要聲明自己需要使用 context，并提供其需要使用的 context 屬性的 PropTypes

父組件需提供一個(gè) getChildContext 函數(shù)，以返回一個(gè)初始的 context 對(duì)象

如果組件中使用構(gòu)造函數(shù)（constructor），還需要在構(gòu)造函數(shù)中傳入第二個(gè)參數(shù) context，并在 super 調(diào)用父類構(gòu)造函數(shù)是傳入 context，否則會(huì)造成組件中無(wú)法使用 context。

...
constructor(props,context){
  super(props,context);
}
...

改變 context 對(duì)象

我們不應(yīng)該也不能直接改變 context 對(duì)象中的屬性，要想改變 context 對(duì)象，只有讓其和父組件的 state 或者 props 進(jìn)行關(guān)聯(lián)，在父組件的 state 或 props 變化時(shí)，會(huì)自動(dòng)調(diào)用 getChildContext 方法，返回新的 context 對(duì)象，而后子組件進(jìn)行相應(yīng)的渲染。

修改 App.js，讓 context 對(duì)象可變：

import React, { Component } from "react";
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";

export default class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            color:"red"
        };
    }
    // 父組件聲明自己支持 context
    static childContextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }

    // 父組件提供一個(gè)函數(shù)，用來(lái)返回相應(yīng)的 context 對(duì)象
    getChildContext(){
        return{
            color:this.state.color,
            callback:this.callback.bind(this)
        }
    }

    // 在此回調(diào)中修改父組件的 state
    callback(color){
        this.setState({
            color,
        })
    }

    render(){
        return(
            
                
            
        );
    }
}

此時(shí)，在子組件的 cb 方法中，傳入相應(yīng)的顏色參數(shù)，就可以改變 context 對(duì)象了，進(jìn)而影響到子組件：

...
return(
    
        SUBSUB
        
    
);
...

context 同樣可以應(yīng)在無(wú)狀態(tài)組件上，只需將 context 作為第二個(gè)參數(shù)傳入：

import React,{ Component } from "react";
import PropTypes from "prop-types";

const SubSub = (props,context) => {
    const style = { color:context.color }
    const cb = (msg) => {
        return () => {
            context.callback(msg);
        }
    }

    return(
        
            SUBSUB
            
        
    );
}

SubSub.contextTypes = {
    color:PropTypes.string,
    callback:PropTypes.func,
}

export default SubSub;

非嵌套組件間通信

非嵌套組件，就是沒(méi)有任何包含關(guān)系的組件，包括兄弟組件以及不在同一個(gè)父級(jí)中的非兄弟組件。對(duì)于非嵌套組件，可以采用下面兩種方式：

利用二者共同父組件的 context 對(duì)象進(jìn)行通信

使用自定義事件的方式

如果采用組件間共同的父級(jí)來(lái)進(jìn)行中轉(zhuǎn)，會(huì)增加子組件和父組件之間的耦合度，如果組件層次較深的話，找到二者公共的父組件不是一件容易的事，當(dāng)然還是那句話，也不是不可以...
這里我們采用自定義事件的方式來(lái)實(shí)現(xiàn)非嵌套組件間的通信。

我們需要使用一個(gè) events 包：

npm install events --save

新建一個(gè) ev.js，引入 events 包，并向外提供一個(gè)事件對(duì)象，供通信時(shí)使用：

import { EventEmitter } from "events";
export default new EventEmitter();

App.js：

import React, { Component } from "react";

import Foo from "./Foo";
import Boo from "./Boo";

import "./App.css";

export default class App extends Component{
    render(){
        return(
            
                
                
            
        );
    }
}

Foo.js：

import React,{ Component } from "react";
import emitter from "./ev"

export default class Foo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            msg:null,
        };
    }
    componentDidMount(){
        // 聲明一個(gè)自定義事件
        // 在組件裝載完成以后
        this.eventEmitter = emitter.addListener("callMe",(msg)=>{
            this.setState({
                msg
            })
        });
    }
    // 組件銷毀前移除事件監(jiān)聽(tīng)
    componentWillUnmount(){
        emitter.removeListener(this.eventEmitter);
    }
    render(){
        return(
            
                { this.state.msg }
                我是非嵌套 1 號(hào)
            
        );
    }
}

Boo.js：

import React,{ Component } from "react";
import emitter from "./ev"

export default class Boo extends Component{
    render(){
        const cb = (msg) => {
            return () => {
                // 觸發(fā)自定義事件
                emitter.emit("callMe","Hello")
            }
        }
        return(
            
                我是非嵌套 2 號(hào)
                
            
        );
    }
}

自定義事件是典型的發(fā)布/訂閱模式，通過(guò)向事件對(duì)象上添加監(jiān)聽(tīng)器和觸發(fā)事件來(lái)實(shí)現(xiàn)組件間通信。

總結(jié)

本文總結(jié)了 React 中組件的幾種通信方式，分別是：

父組件向子組件通信：使用 props

子組件向父組件通信：使用 props 回調(diào)

跨級(jí)組件間通信：使用 context 對(duì)象

非嵌套組件間通信：使用事件訂閱

事實(shí)上，在組件間進(jìn)行通信時(shí)，這些通信方式都可以使用，區(qū)別只在于使用相應(yīng)的通信方式的復(fù)雜程度和個(gè)人喜好，選擇最合適的那一個(gè)。比如，通過(guò)事件訂閱模式通信不止可以應(yīng)用在非嵌套組件間，還可以用于跨級(jí)組件間，非嵌套組件間通信也可以使用 context 等。關(guān)鍵是選擇最合適的方式。
當(dāng)然，自己實(shí)現(xiàn)組件間的通信還是太難以管理了，因此出現(xiàn)了很多狀態(tài)管理工具，如 flux、redux 等，使用這些工具使得組件間的通信更容易追蹤和管理。

作者：Charleylla 
鏈接：https://www.jianshu.com/p/fb9... 
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。

云服務(wù)器 GPU云服務(wù)器內(nèi)部服務(wù)器之間的通訊組件之間通信兩個(gè)服務(wù)器之間通訊父子組件通訊

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

dongxiawu

男|高級(jí)講師

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

TA的文章

查看tensorflow版本

閱讀 1002·2023-04-25 14:20
#黑五#RackNerd：美國(guó)VPS低至$10.88/年，多機(jī)房可選，續(xù)費(fèi)同價(jià)！

閱讀 1879·2021-11-24 10:20
大廠程序員接私活被坑，還被放鴿子，那源碼就開(kāi)源-基于SSM仿知乎小程序

閱讀 3779·2021-11-11 16:55
python+selenium-12306實(shí)戰(zhàn)解決登錄滑塊問(wèn)題

閱讀 2926·2021-10-14 09:42
this指向問(wèn)題的經(jīng)典場(chǎng)景

閱讀 3477·2019-08-30 15:56
JavaScript HTML DOM

閱讀 1174·2019-08-30 15:55
前端開(kāi)發(fā)常見(jiàn)筆試/面試題總結(jié) -- HTML / CSS篇

閱讀 1077·2019-08-30 15:44
less 中function

閱讀 784·2019-08-29 11:28

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

資訊專欄INFORMATION COLUMN

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

React 組件之間的通訊

{ props.title }

相關(guān)文章

React組件模型啟示錄

react開(kāi)發(fā)教程（八）React組件通信

**掌握react，這一篇就夠了**

用Redux來(lái)進(jìn)行組件間通訊

發(fā)表評(píng)論

0條評(píng)論

dongxiawu

男|高級(jí)講師

TA的文章

查看tensorflow版本

#黑五#RackNerd：美國(guó)VPS低至$10.88/年，多機(jī)房可選，續(xù)費(fèi)同價(jià)！

大廠程序員接私活被坑，還被放鴿子，那源碼就開(kāi)源-基于SSM仿知乎小程序

python+selenium-12306實(shí)戰(zhàn)解決登錄滑塊問(wèn)題

this指向問(wèn)題的經(jīng)典場(chǎng)景

JavaScript HTML DOM

前端開(kāi)發(fā)常見(jiàn)筆試/面試題總結(jié) -- HTML / CSS篇

less 中function

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

React 組件之間的通訊

{ props.title }

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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