react之組件通信詳解
更新時(shí)間：2021年10月14日 16:04:05 作者：久宇詩(shī)
本篇文章主要介紹了React組件通信詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
父組件與子組件通信
- 父組件將自己的狀態(tài)傳遞給子組件，子組件當(dāng)做屬性來(lái)接收，當(dāng)父組件更改自己狀態(tài)的時(shí)候，子組件接收到的屬性就會(huì)發(fā)生改變
- 父組件利用ref對(duì)子組件做標(biāo)記，通過(guò)調(diào)用子組件的方法以更改子組件的狀態(tài),也可以調(diào)用子組件的方法
父組中定義ref引用
import React,{Component,createRef} from 'react'
import Child1 from './Child1'
export default class App extends Component {
constructor(props){
super(props)
this.child=createRef()
}
render(){
return(
<div>
<Child1 ref={this.child}/>
<button onClick={this.fn.bind(this)}></button>
</div>
)
}
fn(){
const child=this.child.current
child.setTitle()
}
}
子組件定義好數(shù)據(jù)源和修改數(shù)據(jù)源方法
import React,{Component} from 'react'
export default class Child1 extends Component{
state={
title:'標(biāo)題'
}
render(){
return (
<div>
{this.state.title}
</div>
)
}
setTitle(){
this.setstate({title:'hh'})
}
}
子組件與父組件通信
父組件將自己的某個(gè)方法傳遞給子組件，在方法里可以做任意操作，比如可以更改狀態(tài)，子組件通過(guò)this.props接收到父組件的方法后調(diào)用。
跨組件通信
在react沒(méi)有類似vue中的事件總線來(lái)解決這個(gè)問(wèn)題，一是我們借助它們共同的父級(jí)組件通過(guò)代理的方式來(lái)實(shí)現(xiàn)，但過(guò)程會(huì)相當(dāng)繁鎖。react提供了Context來(lái)實(shí)現(xiàn)跨組件通信, 而不必顯式地通過(guò)組件樹的逐層傳遞 props。
復(fù)雜的非父子組件通信在react中很難處理，多組件間的數(shù)據(jù)共享也不好處理，在實(shí)際的工作中我們會(huì)使用flux、redux、mobx來(lái)實(shí)現(xiàn)
祖先子孫
- 定義store類 導(dǎo)出createContext中的Provider,COnsumer
- 在祖先節(jié)點(diǎn)中發(fā)布消息： Provider value=任意數(shù)據(jù)
- 在子孫節(jié)點(diǎn)中訂閱：Consumer 回調(diào)函數(shù){value=>(組件)}
1.定義數(shù)據(jù)源store
store.js
import React , {createContext} from 'react'
let {Provider,Consumer} = createContext()
export {
Provider,//發(fā)布
Consumer//訂閱
}
2.祖先節(jié)點(diǎn)
import React ,{Component} from 'react'
import {Provider,Consumer} from './store'
import Son from './Son'
export default class App extends Component{
constructor(props){
super(props)
this.state={
name:'mingcen'
}
}
render(){
return (
<div>
<Provider value={this.state.name}>
<Son/>
</Provider>
</div>
)
}
}
3.后代節(jié)點(diǎn)
import React,{Component} from'react'
import {Consumer} from './store'
export default class Son1 extends Component{
constructor(props){
super(props)
this.state={
name:'uuu'
}
}
render(){
return(
<div>
<Consumer>
{
value=>{
<div>{value.name}</div>
}
}
</Consumer>
</div>
)
}
}
兄弟節(jié)點(diǎn)通信
- 一個(gè)子物體掛在事件
- 另一個(gè)掛在屬性
- 通過(guò)實(shí)踐改變屬性，來(lái)改變另一個(gè)組件接受的內(nèi)容
祖先
state={
count:1,
setCount:()=>{
this.setState(state=>{
return{
count:++state.count
}
})
}
}
render(){
let {count,setCount} = this.state
return(
<div>
<Provider value={{count,setCount}}>
<Cmp1></Cmp1>
<Cmp2></Cmp2>
</Provider>
</div>
)
}
兄弟Cmp2
import React, { Component ，createContext} from 'react'
export default class Cmp2 extends Component {
// 只得到了默認(rèn)數(shù)據(jù) --> 沒(méi)有包裹在Provider組件中
static contextType = createContext
render() {
return (
<div>
<button onClick={this.setCount.bind(this)}>自增數(shù)據(jù)</button>
</div>
)
}
setCount() {
this.context.setCount()
}
}
兄弟Cmp1
<Consumer>
{
value => <h3>{value.count}</h3>
}
</Consumer>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
這篇文章主要介紹了React18中的useDeferredValue的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果
本篇文章通過(guò)完整的代碼給大家介紹了react-player實(shí)現(xiàn)視頻播放與自定義進(jìn)度條效果，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-01-01![React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent](http://img.jbzj.com/images/xgimg/bcimg2.png)
React報(bào)錯(cuò)Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例
這篇文章主要介紹了利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
react實(shí)現(xiàn)點(diǎn)擊選中的li高亮的示例代碼
本篇文章主要介紹了react實(shí)現(xiàn)選中的li高亮的示例代碼，頁(yè)面上有很多個(gè)li，要實(shí)現(xiàn)點(diǎn)擊到哪個(gè)就哪個(gè)高亮。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要為大家介紹了React?組件樹遍歷技巧的掌握，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
react?實(shí)現(xiàn)表格列表拖拽排序的示例
本文主要介紹了react?實(shí)現(xiàn)表格列表拖拽排序，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
react路由守衛(wèi)的實(shí)現(xiàn)(路由攔截)
react不同于vue，通過(guò)在路由里設(shè)置meta元字符實(shí)現(xiàn)路由攔截。本文就詳細(xì)的介紹一下，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
React.memo函數(shù)中的參數(shù)示例詳解
這篇文章主要為大家介紹了React.memo函數(shù)中的參數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了ahooks?useRequest的源碼精讀解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07