react之組建通訊

久宇詩發表於2021-10-14
React

父元件與子元件通訊

  • 父元件將自己的狀態傳遞給子元件，子元件當做屬性來接收，當父元件更改自己狀態的時候，子元件接收到的屬性就會發生改變
  • 父元件利用ref對子元件做標記，通過呼叫子元件的方法以更改子元件的狀態,也可以呼叫子元件的方法

父組中定義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()
    }
}

子元件定義好資料來源和修改資料來源方法

import React,{Component} from 'react'
export default class Child1 extends Component{
    state={
        title:'標題'
    }
    render(){
        return (
            <div>
                {this.state.title}
            </div>
        )
    }
    setTitle(){
        this.setstate({title:'hh'})
    }
}

子元件與父元件通訊

父元件將自己的某個方法傳遞給子元件，在方法裡可以做任意操作，比如可以更改狀態，子元件通過this.props接收到父元件的方法後呼叫。

跨元件通訊

在react沒有類似vue中的事件匯流排來解決這個問題，一是我們藉助它們共同的父級元件通過代理的方式來實現，但過程會相當繁鎖。react提供了Context來實現跨元件通訊, 而不必顯式地通過元件樹的逐層傳遞 props。

複雜的非父子元件通訊在react中很難處理，多元件間的資料共享也不好處理，在實際的工作中我們會使用flux、redux、mobx來實現

祖先子孫

  1. 定義store類 匯出createContext中的Provider,COnsumer
  2. 在祖先節點中釋出訊息： Provider value=任意資料
  3. 在子孫節點中訂閱：Consumer 回撥函式{value=>(元件)}
    1.定義資料來源store
    store.js
import React , {createContext} from 'react'
let {Provider,Consumer} = createContext()
export { 
    Provider,//釋出
    Consumer//訂閱
    }

2.祖先節點

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.後代節點

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>
        )
    }
}

兄弟節點通訊

  • 一個子物體掛在事件
  • 另一個掛在屬性
  • 通過實踐改變屬性，來改變另一個元件接受的內容
    祖先
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 {
  // 只得到了預設資料 --> 沒有包裹在Provider元件中
  static contextType = createContext

  render() {
    return (
      <div>
        <button onClick={this.setCount.bind(this)}>自增資料</button>
      </div>
    )
  }
  setCount() {
    this.context.setCount()
  }
}

兄弟Cmp1

<Consumer>
    {
        value => <h3>{value.count}</h3>
    }
</Consumer>

相關文章