上节课我们介绍了错误边界的概念，这节课我们对组件间通信来做一个总结

回顾

在开始这节课内容之前，我们对上节课的内容来做一个简单的回顾

  • 错误边界用来捕获后代组件的错误，并且渲染备用页面。
  • 所谓错误边界，首先有错误，其次有边界
  • getDerivedStateFromError捕获错误并生成新的状态对象
  • componentDidCatch统计错误反馈给服务器
  • 只能捕获后代组件的生命周期中出的错误

以上便是上节课的主要知识点，接下来我们开始这节课的学习

组件之间的关系

  • 父子组件
  • 兄弟组件(无嵌套关系的组件)
  • 祖孙组件(跨级组件)

这几种关系其实很好理解的我们来画一个图解释一下

image-20220215134924407

我们来看图：

  • 父子组件
    • 组件 1 与组件 2
    • 组件 1 与组件 3
    • 组件 3 与组件 4
  • 兄弟关系
    • 组件 2 与组件 3
    • 组件 2 与组件 4
  • 祖孙关系
    • 组件 1 与组件 4

这样一解释，组件间的关系也就明确了。

组件间通信方式

  • props
  • children props
  • render props
  • 消息订阅发布，如pubsub
  • 集中式管理，如redux
  • context，生产者——消费者模式

比较好的通信搭配

  • 父子组件：props
  • 兄弟组件：消息订阅发布，集中式管理
  • 祖孙组件：消息订阅发布，集中式管理，context(开发用得少，多用于插件封装)

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/extend_communicate_between_components/