React组件通信

父传子组件通信

在父组件中子组件标签上绑定一个属性,挂载传递的数据,子组件中props接收传递的数据,直接使用即可。

子传父组件通信

在父组件中子组件标签上绑定一个属性,传递一个方法给子组件,子组件中通过props接收这个方法,直接调用,传递相应的参数即可

非父子组件通信

状态提升

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

context状态树传参

在父组件中我们通过createContext() 创建一个空对象,在父组件的最外层我们使用Provider包裹数据,通过value绑定要传递的对象数据。

在嵌套的子组件中,我们有两种方式获取数据:
1.我们可以使用Customer标签,在标签中绑定一个箭头函数,函数的形参context就是value传递的数据
2.class组件中我们可以定义static contextType=context对象,组件中直接使用this.context获取数据。

发布-订阅模式

可以通过自定义事件或消息的发布-订阅机制,在组件之间进行通信。通过创建一个事件或消息中心,组件可以向事件中心发布消息,并订阅感兴趣的消息。其他组件可以监听并响应这些消息,从而实现组件之间的通信。

Redux

Redux 是状态管理库,适用于大型和复杂的应用程序。它使用单一的全局状态来管理应用程序的数据,并提供了一种统一的方式来更新和获取状态。通过在组件中连接 Redux 的状态和行为,组件可以通过 Redux 来共享和更新数据。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值