如何面向组件跨层级通信

在这里插入图片描述

父与子的通信

最常见的场景,React开发的每个组件都在使用的设计模式每个组件都会在父级被使用,再传入Props,完成信息的传递

子与父的通信

主要依赖回调函数,回调函数在js中称为callback,通过回调函数获取内部包装的值.,通过这种方式可以让子组件专注于业务逻辑,让我们的父组件专注于渲染

兄弟组件

依赖于共同的父组件来进行中转.,这种模式主要负责在容器组件中协调各个组件.

无直接关系

无直接关系是两个组件的直接关联性小,身处于多层级的嵌套关系中,不是父子关系,不相邻,相对遥远但仍需共享数据,完成通信.

通信方案1.context

在这里插入图片描述

如果需要共享context需要每一个组件包装一个消费者,这样会带来许多无意义的代码.

通信方案2:全局事件和全局变量

全局变量与事件.全局变量,顾名思义是放在 Window上的变量修改Window上的变量并不会引起 React组件重新渲染

全局变量:更加的推荐用于暂存临时数据,并不推荐,因为会增加维护成本

全局事件:时间的绑定往往会在组件的加载的时候放入

通信方案3,状态管理框架

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值