React组件通信实现方式详解

 更新时间:2023年03月17日 08:52:54   作者:糖^O^  
这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点,本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法,需要的朋友可以参考下

1. 父子组件通信方式

✨父子组件之间的通信很常见,其中父组件可以通过props,原型方法向子组件通信,同时子组件也可以用回调函数,事件冒泡向父组件通信

父传子

原型方法

父组件通过React.createRef()创建Ref,保存在实例属性myRef上。父组件

中,渲染子组件时,定义一个Ref属性,值为刚创建的myRef。

父组件调用子组件的myFunc函数,传递一个参数,子组件接收到参数,打印出参数。

this.props

name作为props由父组件传递给子组件,子组件拿到name后,渲染在页面上。参数有父组件传递给子组件

import React, { Component, Fragment } from 'react';
class Son extends Component {
    myFunc(name) {
        console.log(name);
    }
    render() {
        return <></>;
    }
}
// 父组件
export default class Father extends Component {
    constructor(props) {
        super(props);
        // 创建Ref,并保存在实例属性myRef上
        this.myRef = React.createRef();
    }
    componentDidMount() {
        // 调用子组件的函数,传递一个参数
        this.myRef.current.myFunc('Jack');
    }
    render() {
        return (
            <>
                <Son ref={this.myRef} />
            </>
        );
    }
}

子传父

  • 回调函数
  • 事件冒泡

在子组件内部,修改了父组件中的值,从而完成了子组件向父组件通信

import React, { Component } from 'react'
class Navbar extends Component{
    render(){
        return <div style={{background:"red"}}>
            <button onClick={()=>{
                   console.log("子通知父, 让父的isSHow 取反。",this.props.event) 
                   this.props.event() //调用父组件传来啊的回调函数
            }}>click</button>
            <span>navbar</span>
        </div>
    }
}
class Sidebar extends Component{
    render(){
        return <div style={{background:"yellow",width:"200px"}}> 
            <ul>
                <li>11111</li>
            </ul>
        </div>
    }
}
export default class App extends Component {
    state = {
        isShow:false
    }
    handleEvent = ()=>{
        this.setState({
            isShow:!this.state.isShow
        })
        // console.log("父组件定义的event事件")
    }
    render() {
        return (
            <div>
                <Navbar event={this.handleEvent}/>
                {/* <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow
                    })
                }}>click</button> */}
                {this.state.isShow && <Sidebar/>}
            </div>
        )
    }
}
/*
父传子 :属性,
子传父: 回调函数 callback
*/

2. 非父子组件通信方式

👉状态提升

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props

👉发布订阅模式实现

👉context状态树传参

a. 先定义全局context对象
import React from 'react'
const GlobalContext = React.createContext()
export default GlobalContext
b. 根组件引入GlobalContext,并使用GlobalContext.Provider(生产者)
//重新包装根组件 class App {}
<GlobalContext.Provider
value={{
name:"kerwin",
age:100,
content:this.state.content,
show:this.show.bind(this),
hide:this.hide.bind(this)
}}
>
<之前的根组件></之前的根组件>
</GlobalContext.Provider>
c. 任意组件引入GlobalContext并调用context,使用GlobalContext.Consumer(消费者)
<GlobalContext.Consumer>
{
context => {
this.myshow = context.show; //可以在当前组件任意函数触发
this.myhide = context.hide;//可以在当前组件任意函数触发
return (
<div>
{context.name}-{context.age}-{context.content}
</div>
)
}
}
</GlobalContext.Consumer>

注意:GlobalContext.Consumer内必须是回调函数,通过context方法改变根组件状态

context优缺点:

优点:跨组件访问数据

缺点:react组件树种某个上级组件shouldComponetUpdate 返回false,当context更新时,不会引起下级组件更新

到此这篇关于React组件通信实现方式详解的文章就介绍到这了,更多相关React组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用React实现一个有点意思的电梯小程序

    利用React实现一个有点意思的电梯小程序

    这篇文章主要为大家详解介绍了如何利用React实现一个有点意思的电梯小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2022-08-08
  • TypeScript在React项目中的使用实践总结

    TypeScript在React项目中的使用实践总结

    这篇文章主要介绍了TypeScript在React项目中的使用总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • 对react中间件的理解

    对react中间件的理解

    这篇文章主要介绍了对react中间件的理解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • React中ES5与ES6写法的区别总结

    React中ES5与ES6写法的区别总结

    这篇文章主要总结介绍了关于React中ES5与ES6的写法区别,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • React tsx生成随机验证码

    React tsx生成随机验证码

    这篇文章主要为大家详细介绍了React tsx生成随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 详解关于React-Router4.0跳转不置顶解决方案

    详解关于React-Router4.0跳转不置顶解决方案

    这篇文章主要介绍了详解关于React-Router4.0跳转不置顶解决案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 浅谈react 同构之样式直出

    浅谈react 同构之样式直出

    这篇文章主要介绍了浅谈react 同构之样式直出,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React鼠标多选功能的配置方法

    React鼠标多选功能的配置方法

    本文给大家分享React鼠标多选功能,通过导入组件直接包裹已经设计好的列表即可,操作简单方便,对React鼠标多选相关知识感兴趣的朋友一起看看吧
    2021-05-05
  • 浅析JS中什么是自定义react数据验证组件

    浅析JS中什么是自定义react数据验证组件

    我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题。这篇文章主要介绍了js中什么是自定义react数据验证组件,需要的朋友可以参考下
    2018-10-10
  • React-Native中禁用Navigator手势返回的示例代码

    React-Native中禁用Navigator手势返回的示例代码

    本篇文章主要介绍了React-Native中禁用Navigator手势返回的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09

最新评论