react之組件通信詳解
父組件與子組件通信
- 父組件將自己的狀態(tài)傳遞給子組件,子組件當(dāng)做屬性來接收,當(dāng)父組件更改自己狀態(tài)的時候,子組件接收到的屬性就會發(fā)生改變
- 父組件利用ref對子組件做標(biāo)記,通過調(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'}) } }
子組件與父組件通信
父組件將自己的某個方法傳遞給子組件,在方法里可以做任意操作,比如可以更改狀態(tài),子組件通過this.props
接收到父組件的方法后調(diào)用。
跨組件通信
在react沒有類似vue中的事件總線來解決這個問題,一是我們借助它們共同的父級組件通過代理的方式來實(shí)現(xiàn),但過程會相當(dāng)繁鎖。react提供了Context來實(shí)現(xiàn)跨組件通信, 而不必顯式地通過組件樹的逐層傳遞 props。
復(fù)雜的非父子組件通信在react中很難處理,多組件間的數(shù)據(jù)共享也不好處理,在實(shí)際的工作中我們會使用flux、redux、mobx來實(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)通信
- 一個子物體掛在事件
- 另一個掛在屬性
- 通過實(shí)踐改變屬性,來改變另一個組件接受的內(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ù) --> 沒有包裹在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é)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
React Native 混合開發(fā)多入口加載方式詳解
這篇文章主要介紹了React Native 混合開發(fā)多入口加載方式詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09React css-in-js基礎(chǔ)介紹與應(yīng)用
隨著React、Vue等支持組件化的MVVM前端框架越來越流行,在js中直接編寫css的技術(shù)方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢,下面帶你了解它2022-09-09詳解開發(fā)react應(yīng)用最好用的腳手架 create-react-app
本篇文章主要介紹了詳解開發(fā)react應(yīng)用最好用的腳手架 create-react-app,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04React+Antd+Redux實(shí)現(xiàn)待辦事件的方法
這篇文章主要介紹了React+Antd+Redux實(shí)現(xiàn)待辦事件的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03react中的useContext具體實(shí)現(xiàn)
useContext是React提供的一個鉤子函數(shù),用于在函數(shù)組件中訪問和使用Context,useContext的實(shí)現(xiàn)原理涉及React內(nèi)部的機(jī)制,本文給大家介紹react中的useContext具體實(shí)現(xiàn),感興趣的朋友一起看看吧2023-11-11使用webpack配置react-hot-loader熱加載局部更新
這篇文章主要介紹了使用webpack配置react-hot-loader熱加載局部更新,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01react?echarts?tree樹圖搜索展開功能示例詳解
這篇文章主要為大家介紹了react?echarts?tree樹圖搜索展開功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01