快捷導(dǎo)航

React組件通信實(shí)現(xiàn)方式詳解

更新時(shí)間：2023年03月17日 08:52:54 作者：糖^O^

這篇文章主要介紹了React組件通信,在開(kāi)發(fā)中組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，本文通過(guò)實(shí)例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下

1. 父子組件通信方式

?父子組件之間的通信很常見(jiàn)，其中父組件可以通過(guò)props，原型方法向子組件通信，同時(shí)子組件也可以用回調(diào)函數(shù)，事件冒泡向父組件通信

父?jìng)髯?/h3>

原型方法

父組件通過(guò)React.createRef()創(chuàng)建Ref，保存在實(shí)例屬性myRef上。父組件

中，渲染子組件時(shí)，定義一個(gè)Ref屬性，值為剛創(chuàng)建的myRef。

父組件調(diào)用子組件的myFunc函數(shù)，傳遞一個(gè)參數(shù)，子組件接收到參數(shù)，打印出參數(shù)。

this.props

name作為props由父組件傳遞給子組件，子組件拿到name后，渲染在頁(yè)面上。參數(shù)有父組件傳遞給子組件

import React, { Component, Fragment } from 'react';
class Son extends Component {
    myFunc(name) {
        console.log(name);
    }
    render() {
        return <></>;
    }
}
// 父組件
export default class Father extends Component {
    constructor(props) {
        super(props);
        // 創(chuàng)建Ref，并保存在實(shí)例屬性myRef上
        this.myRef = React.createRef();
    }
    componentDidMount() {
        // 調(diào)用子組件的函數(shù)，傳遞一個(gè)參數(shù)
        this.myRef.current.myFunc('Jack');
    }
    render() {
        return (
            <>
                <Son ref={this.myRef} />
            </>
        );
    }
}

子傳父

回調(diào)函數(shù)
事件冒泡

在子組件內(nèi)部，修改了父組件中的值，從而完成了子組件向父組件通信

import React, { Component } from 'react'
class Navbar extends Component{
    render(){
        return <div style={{background:"red"}}>
            <button onClick={()=>{
                   console.log("子通知父， 讓父的isSHow 取反。",this.props.event) 
                   this.props.event() //調(diào)用父組件傳來(lái)啊的回調(diào)函數(shù)
            }}>click</button>
            <span>navbar</span>
        </div>
    }
}
class Sidebar extends Component{
    render(){
        return <div style={{background:"yellow",width:"200px"}}> 
            <ul>
                <li>11111</li>
            </ul>
        </div>
    }
}
export default class App extends Component {
    state = {
        isShow:false
    }
    handleEvent = ()=>{
        this.setState({
            isShow:!this.state.isShow
        })
        // console.log("父組件定義的event事件")
    }
    render() {
        return (
            <div>
                <Navbar event={this.handleEvent}/>
                {/* <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow
                    })
                }}>click</button> */}
                {this.state.isShow && <Sidebar/>}
            </div>
        )
    }
}
/*
父?jìng)髯?：屬性，
子傳父： 回調(diào)函數(shù) callback
*/

2. 非父子組件通信方式

??狀態(tài)提升

React中的狀態(tài)提升概括來(lái)說(shuō),就是將多個(gè)組件需要共享的狀態(tài)提升到它們最近的父組件上.在父組件上改變這個(gè)狀態(tài)然后通過(guò)props

??發(fā)布訂閱模式實(shí)現(xiàn)

??context狀態(tài)樹(shù)傳參

a. 先定義全局context對(duì)象
import React from 'react'
const GlobalContext = React.createContext()
export default GlobalContext

b. 根組件引入GlobalContext，并使用GlobalContext.Provider（生產(chǎn)者）
//重新包裝根組件 class App {}
<GlobalContext.Provider
value={{
name:"kerwin",
age:100,
content:this.state.content,
show:this.show.bind(this),
hide:this.hide.bind(this)
}}
>
<之前的根組件></之前的根組件>
</GlobalContext.Provider>

c. 任意組件引入GlobalContext并調(diào)用context，使用GlobalContext.Consumer（消費(fèi)者）
<GlobalContext.Consumer>
{
context => {
this.myshow = context.show; //可以在當(dāng)前組件任意函數(shù)觸發(fā)
this.myhide = context.hide;//可以在當(dāng)前組件任意函數(shù)觸發(fā)
return (
<div>
{context.name}-{context.age}-{context.content}
</div>
)
}
}
</GlobalContext.Consumer>

注意：GlobalContext.Consumer內(nèi)必須是回調(diào)函數(shù)，通過(guò)context方法改變根組件狀態(tài)

context優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：跨組件訪問(wèn)數(shù)據(jù)

缺點(diǎn)：react組件樹(shù)種某個(gè)上級(jí)組件shouldComponetUpdate 返回false,當(dāng)context更新時(shí)，不會(huì)引起下級(jí)組件更新

到此這篇關(guān)于React組件通信實(shí)現(xiàn)方式詳解的文章就介紹到這了,更多相關(guān)React組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: