2021-04-26 React组件通信方式总结

379 阅读2分钟

父组件向子组件通信

fu-zi.png

  • 父组件以自身的state作为子组件的props,父组件调用setState,则子组件的props发生变化,触发重新渲染
  • 通过ref调用子组件的方法,不过这个只在子组件时类组件时有用,因为函数组件没有实例

子组件之间相互通信

子组件.png

  • 通过状态提升,将共有信息保存在父组件state中,然后把函数和state作为props传递给子组件,当一个子组件调用回调函数将参数返回给父组件的state,再通过props传递给另外的子组件,触发重新渲染

子组件向父组件通信

  • 父组件将函数作为props传递给子组件,子组件在需要时调用,将数据作为参数返回,也就是常说的回调callback

任意组件(跨域父子)之间的通信

任意.png

  • 全局事件订阅系统(EventEmitter)
  • 单向数据流 redux
  • 双向数据流 mobx
  • React高级API-context方式,三步走:创建context对象、创建Provider,传递value、子组件消费value(react-redux和react-router就是这种方式

redux顾

redux回顾.png

redux其实就是提供了一个统一管理状态的容器-Store,其详细内容转到我的另外一篇博文redux源码简单实现

最后打个比喻:

  • 某小区物业(Provider)提供了公用的公告板(Store),小区内的所有人都可以看到这个公告板,也可以发布消息
  • 公告板分板块,且每个版块都有专人审核编辑(Reducer)
  • 某天某妹子发出(Dispatch)一则启示(Action),对的就是征婚(Type)启事,附带个人介绍(Payload);经人审核编辑后(Reducer)贴在公告板上;关注(Connect)征婚的单身狗们(Component)自然都看到了消息,于是掏出手机拍下了公告板上的美颜照,回家开始严肃的捯饬自己(render)