react之组件通信详解

更新时间：2021年10月14日 16:04:05 作者：久宇诗

本篇文章主要介绍了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来实现

祖先子孙

定义store类导出createContext中的Provider,COnsumer
在祖先节点中发布消息： Provider value=任意数据
在子孙节点中订阅：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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

您可能感兴趣的文章:

React新文档切记不要滥用effect
这篇文章主要为大家介绍了React新文档滥用effect出现的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React超详细分析useState与useReducer源码
我正在处理的组件是表单的时间输入。表单相对复杂，并且是动态生成的，根据嵌套在其他数据中的数据显示不同的字段。我正在用useReducer管理表单的状态，到目前为止效果很好
2022-11-11
基于React实现表单数据的添加和删除详解
这篇文章主要给大家介绍了基于React实现表单数据的添加和删除的方法，文中给出了详细的示例供大家参考，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03
解读useState第二个参数的"第二个参数"
这篇文章主要介绍了useState第二个参数的"第二个参数",具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
create-react-app构建项目慢的解决方法
这篇文章主要介绍了create-react-app构建项目慢的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
react实现组件状态缓存的示例代码
本文主要介绍了react实现组件状态缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
浅谈React 属性和状态的一些总结
下面小编就为大家带来一篇浅谈React 属性和状态的一些总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
React中props使用教程
props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用
2022-09-09
最新版React Native环境搭建(亲测)
这篇文章主要介绍了最新版React Native环境搭建，React Native的运行需要依赖原生Android和iOS环境，因此需要分别安装原生Android和iOS的开发环境，本文给大家介绍的非常详细,需要的朋友可以参考下
2022-08-08
在 React 项目中全量使用 Hooks的方法
这篇文章主要介绍了在 React 项目中全量使用 Hooks,使用 Hooks 能为开发提升不少效率，但并不代表就要抛弃 Class Component，依旧还有很多场景我们还得用到它，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10