快捷導(dǎo)航

React父子組件間的通信是怎樣進(jìn)行的

更新時(shí)間：2023年03月14日 09:14:16 作者：旺仔好吃糖

這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

父子組件通信方式

（1）傳遞數(shù)據(jù)（父傳子）與傳遞方法（子傳父）

（2）ref標(biāo)記（父組件拿到子組件的引用，從而調(diào)用子組件的方法）

父傳子

使用 props屬性，傳入props

this.props.數(shù)據(jù)

//父組件
 <Field label="用戶名"></Field>
//子組件
 <label>{this.props.label}</label>

子傳父

父組件向子組件傳一個(gè)函數(shù)，然后通過子組件中這個(gè)函數(shù)的回調(diào)，拿到子組件穿過的值

this.props.函數(shù)名()

//子組件
<input onChange={(evt)=>{
   this.props.onChangeEvent(evt.target.value)
}}></input>
//父組件
 <Field onChangeEvent={(value)=>{
    console.log(value)
 }}></Field>

ref標(biāo)記(傳遞數(shù)據(jù))

在組件身上綁定ref，直接通過 this.username.current 獲得整個(gè)組件,this.username.current.state獲得子組件內(nèi)state數(shù)據(jù)

this.ref名.current

//子組件中
 state={
     value:''
 }
 <input onChange={(evt)=>{
   this.setState({
       value:evt.target.value
   })
}}></input>
//父組件
username = React.createRef()
<Field ref={this.username}></Filed>
....
console.log(this.username.current.state.value)

??????父組件中清除子組件的值：在子組件中定義修改state函數(shù)，父組件中調(diào)用此函數(shù)來實(shí)現(xiàn)

clear(){
    this.setState({
        value:''
    })
}
 <input value={this.state.value}></input>
....................
this.username.current.clear()//父

非父子組件通信方式

狀態(tài)提升(兄弟通信)

React中的狀態(tài)提升概括來說，就是將多個(gè)組件需要共享的狀態(tài)提升到它們最近的父組件上，在父組件上改變這個(gè)狀態(tài)然后通過props分發(fā)給子組件

發(fā)布訂閱模式

兄弟組件AB，子組件A將值傳給B組件，在子組件A中發(fā)布，在子組件B中訂閱,，此方法適合任意關(guān)系的通信

調(diào)度中心bus:

var bus={
	list:[]，//放入所有的訂閱
	//訂閱
    subscribe(callback){
         this.list.push(callback)
        //callback為注冊訂閱的回調(diào)函數(shù)
    }
	//發(fā)布
	publish(){
    }
}

1.訂閱消息

//創(chuàng)建訂閱的回調(diào)函數(shù)
subscribe(callback){
   console.log(callback);
   this.list.push(callback)
}
//訂閱者
bus.subscribe((value)=>{
    console.log(111,value);
})
bus.subscribe((value)=>{
    console.log(222,value);
})

2.發(fā)布消息

//創(chuàng)建bus（調(diào)度中心）中的發(fā)布函數(shù)
publish(text){
        //遍歷所有的list,將回調(diào)函數(shù)執(zhí)行
        // console.log(this.list);
        this.list.forEach(callback=>{
            callback && callback(text)
        })
    }
//發(fā)布者
setTimeout(()=>{
    bus.publish('沉默')
},0)

bus.publish調(diào)用時(shí)，傳入?yún)?shù)，觸發(fā)bus中publish函數(shù)并接收到數(shù)據(jù)即text，調(diào)用callback回調(diào)函數(shù)，傳入text，此時(shí)調(diào)用者subscribe將收到參數(shù)為value，即將組件A數(shù)據(jù)傳入組件B中

context狀態(tài)樹傳參(跨組件方案)

Context 提供了一種在組件之間共享此類值的方式,是“全局”的數(shù)據(jù)，而不必顯式地通過組件樹的逐層傳遞 props。

context上下文對象來管理公共狀態(tài)，來實(shí)現(xiàn)數(shù)據(jù)的修改

1.創(chuàng)建context對象

const GlobalContext = React.createContext()

2.創(chuàng)建提供數(shù)據(jù)的父組件Provider

給Provider組件設(shè)置value屬性，需要傳遞到后代組件中的數(shù)據(jù)作為value的值

當(dāng)Provider發(fā)生數(shù)據(jù)value變更時(shí)，會觸發(fā)到Consumer發(fā)生渲染，所有被其包裹的子組件都會發(fā)生渲染（render被調(diào)用）

//格式
state={
    info:'111'
}
render(){
    return(
        <GlobalContext.Provider value={{
        	//key:value或key:函數(shù)
        }}>
        	<div>父組件內(nèi)容</div>
        </GlobalContext.Provider>
    )
}

3.創(chuàng)建接受數(shù)據(jù)的子孫組件Consumer

//格式
render(){
     return(
       <GlobalContext.Consumer>
        {
            (value)=>{
                return(
                    <div onClick={()=>{
                       
                      }}>
                    </div>
                )
            }
        }
       </GlobalContext.Consumer>
    )
}

4.在子孫組件A中調(diào)用Provider中的回調(diào)函數(shù)

某些時(shí)候需要內(nèi)部組件去更新Context的數(shù)據(jù)，只需要向上下文添加回調(diào)函數(shù)即可

//子組件A中  調(diào)用回調(diào)函數(shù)，傳遞數(shù)據(jù)
value.chageInfo(synopsis)
//父組件
state={
        info:111
}
......................................
<GlobalContext.Provider value={{
     "name":"說名字",
     "info":this.state.info,
     chageInfo:(content)=>{
         this.setState({
             info:content
         })
     }
}}>

全局定義狀態(tài)，并修改狀態(tài)

5.子孫組件B中接收Provider的數(shù)據(jù)

 <GlobalContext.Consumer>
        {
            (value)=><div className="filmDetail">
                //接受Provider的數(shù)據(jù)
                    detail-{value.info}
                </div>
        }
 </GlobalContext.Consumer>

實(shí)現(xiàn)了將組件A的值傳給了組件B的值

React插槽

作用：為了復(fù)用；一定程度減少父子通信

children實(shí)現(xiàn)插槽

在React組件中直接包裹一些html標(biāo)簽，html標(biāo)簽內(nèi)容是否會出現(xiàn)呢？

<Child>
    <div>111</div>
    <div>22</div>
    <div>333</div>
</Child>

由上圖可見，被包裹的html標(biāo)簽并未被渲染出來，這是因?yàn)楫?dāng)讀取到Child組件時(shí)，會重新渲染頁面覆蓋被包裹的html標(biāo)簽；而我們可以在Child組件中留下html標(biāo)簽的位置，以便來顯示被包裹的html，這種做法即為插槽

語法

使用props的固定屬性children在Child組件中占位

this.props.children
//該屬性中包含子組件標(biāo)簽開始到結(jié)束之間的內(nèi)容

父組件的子組件標(biāo)簽中寫入要插入到子組件的html標(biāo)簽

export default class App extends Component {
  render() {
    return (
      <div>
        <Child>
            <div>111</div>
            <div>22</div>
            <div>333</div>
        </Child>
      </div>
    )
  }
}

在子組件中放入該標(biāo)簽

class Child extends Component{
    render(){
        return(
            <div>
                child
                 {this.props.children}
            </div>
        )
    }
}

多個(gè)元素的children

如果children中有多個(gè)元素，那么children為一個(gè)數(shù)組，數(shù)組中放著所有存放的內(nèi)容

//父組件
<Child>
            <div>111</div>
            <div>22</div>
            <div>333</div>
</Child>
//子組件
<div>
    child
    <h3>以下獲得所有內(nèi)容</h3>
     {this.props.children}
     <h3>以下獲得數(shù)組其中的元素</h3>
     {this.props.children[1]}
</div>