欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react之組件通信詳解

 更新時(shí)間：2021年10月14日 16:04:05   作者：久宇詩  
本篇文章主要介紹了React組件通信詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

父組件與子組件通信

  • 父組件將自己的狀態(tài)傳遞給子組件，子組件當(dāng)做屬性來接收，當(dāng)父組件更改自己狀態(tài)的時(shí)候，子組件接收到的屬性就會發(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'})
    }
}

子組件與父組件通信

父組件將自己的某個(gè)方法傳遞給子組件，在方法里可以做任意操作，比如可以更改狀態(tài)，子組件通過this.props接收到父組件的方法后調(diào)用。

跨組件通信

在react沒有類似vue中的事件總線來解決這個(gè)問題，一是我們借助它們共同的父級組件通過代理的方式來實(shí)現(xiàn)，但過程會相當(dāng)繁鎖。react提供了Context來實(shí)現(xiàn)跨組件通信, 而不必顯式地通過組件樹的逐層傳遞 props。

復(fù)雜的非父子組件通信在react中很難處理，多組件間的數(shù)據(jù)共享也不好處理，在實(shí)際的工作中我們會使用flux、redux、mobx來實(shí)現(xiàn)

祖先子孫

  1. 定義store類 導(dǎo)出createContext中的Provider,COnsumer
  2. 在祖先節(jié)點(diǎn)中發(fā)布消息： Provider value=任意數(shù)據(jù)
  3. 在子孫節(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è)掛在屬性
  • 通過實(shí)踐改變屬性，來改變另一個(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ù) --> 沒有包裹在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ā)多入口加載方式詳解

    這篇文章主要介紹了React Native 混合開發(fā)多入口加載方式詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • react實(shí)現(xiàn)頁面水印效果的全過程

    react實(shí)現(xiàn)頁面水印效果的全過程

    大家常常關(guān)注的是網(wǎng)站圖片增加水印,而很少關(guān)注頁面水印,其實(shí)這個(gè)需求也是比較常見的,比如公文系統(tǒng)、合同系統(tǒng)等,這篇文章主要給大家介紹了關(guān)于react實(shí)現(xiàn)頁面水印效果的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • React css-in-js基礎(chǔ)介紹與應(yīng)用

    React 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

    本篇文章主要介紹了詳解開發(fā)react應(yīng)用最好用的腳手架 create-react-app，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-04-04
  • React+Antd+Redux實(shí)現(xiàn)待辦事件的方法

    React+Antd+Redux實(shí)現(xiàn)待辦事件的方法

    這篇文章主要介紹了React+Antd+Redux實(shí)現(xiàn)待辦事件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • React18之狀態(tài)批處理的使用

    React18之狀態(tài)批處理的使用

    本文主要介紹了React18之狀態(tài)批處理的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • react中的useContext具體實(shí)現(xiàn)

    react中的useContext具體實(shí)現(xiàn)

    useContext是React提供的一個(gè)鉤子函數(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熱加載局部更新

    這篇文章主要介紹了使用webpack配置react-hot-loader熱加載局部更新，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • 記React connect的幾種寫法(小結(jié))

    記React connect的幾種寫法(小結(jié))

    這篇文章主要介紹了記React connect的幾種寫法(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • react?echarts?tree樹圖搜索展開功能示例詳解

    react?echarts?tree樹圖搜索展開功能示例詳解

    這篇文章主要為大家介紹了react?echarts?tree樹圖搜索展開功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-01-01

最新評論