React -- 类式组件的非父子通信

38 阅读2分钟

<1> 状态提升(中间人模式)

状态提升 就是把要通信(共享状态)的几个组件,找到它们最近的的父组件,把要共享的状态传给父组件保管,需要通信时,就由要更新的子组件,告诉父组件要更新,在父组件中获得要更新的状态,进行更新后,再分别传给其余的子组件,完成通信!!!

<2> 订阅发布模式

1874.png

反正就是在订阅中心中(对象),定义两种函数订阅函数发布函数

  • 发布函数里,需要遍历执行订阅者传入的所有回调函数!!
  • 订阅函数里,需要执行把每个订阅者传入的回调函数收集起来的操作!![ 可以在订阅中心中,声明一个list变量,在每次的订阅函数中,把传入的回调函数 push 进去就行 ]
  • 订阅者每次订阅时,调用订阅函数,并传入自己的订阅回调函数!!
  • 发布者每次发布的时候,调用发布函数就行!!!发布函数接收一个参数,可以将要发布的数据传进去!!

流程就是,要发布数据的(即拥有数据的部分)在需要的时候,调用发布函数,把要传送的数据,作为参数传入发布函数中。在要接收数据的地方,提前订阅函数(可以在组件渲染前就订阅),这样,就可以在发布者一发布函数,就接收到!!

<3> context 状态树传参

1875.png

就是找到要通信的组件的最近父组件,把它作为 Provider 掌控着总数据!!!然后把要通信的组件都看作 consumer

  • 先定义全局 context 对象

1876.png

    - const GlobalContext = React.createContext();
  • 用 < GlobalContext.Provider > 去包括父组件

    • 并在标签中,通过设置 value 值来提高服务!!! 1877.png
  • 用 < GlobalContext.Consumer > 去包括各个消费的子组件!!

      - 注意,需要使用回调函数的方式包括
    

1878.png

因为这样可以,通过参数 value ,使得消费者可以使用 Provider 提供的服务!!!