react中组件通信的示例分析

小编给大家分享一下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(            
                                            
        )    }    fn(){        const child=this.child.current        child.setTitle()    }}

子组件定义好数据源和修改数据源方法

import React,{Component} from 'react'export default class Child1 extends Component{    state={        title:'标题'    }    render(){        return (            
                {this.state.title}            
        )    }    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 (            
                                                                
        )    }}

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(            
                                   {                        value=>{                            
{value.name}
                        }                   }                            
        )    }}

兄弟节点通信

• 一个子物体挂在事件

• 另一个挂在属性

• 通过实践改变属性，来改变另一个组件接受的内容
  

祖先

state={    count:1,    setCount:()=>{        this.setState(state=>{            return{                count:++state.count            }        })    }}render(){    let {count,setCount} = this.state    return(        
                                                                
    )}

兄弟Cmp2

import React, { Component ，createContext} from 'react'export default class Cmp2 extends Component {  // 只得到了默认数据 --> 没有包裹在Provider组件中  static contextType = createContext  render() {    return (      
        自增数据      
    )  }  setCount() {    this.context.setCount()  }}

兄弟Cmp1

    {        value => 
{value.count}
    }

看完了这篇文章，相信你对"react中组件通信的示例分析"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！