<1> 状态提升(中间人模式)
状态提升
就是把要通信(共享状态)的几个组件,找到它们最近的的父组件,把要共享的状态传给父组件保管,需要通信时,就由要更新的子组件,告诉父组件要更新,在父组件中获得要更新的状态,进行更新后,再分别传给其余的子组件,完成通信!!!
<2> 订阅发布模式
反正就是在订阅中心中(对象),定义两种函数:订阅函数
和 发布函数
- 在
发布函数
里,需要遍历执行订阅者传入的所有回调函数!! - 在
订阅函数
里,需要执行把每个订阅者传入的回调函数收集起来的操作!![ 可以在订阅中心中,声明一个list变量,在每次的订阅函数中,把传入的回调函数 push 进去就行 ] - 订阅者每次订阅时,调用订阅函数,并传入自己的订阅回调函数!!
- 发布者每次发布的时候,调用发布函数就行!!!发布函数接收一个参数,可以将要发布的数据传进去!!
流程就是,要发布数据的(即拥有数据的部分)在需要的时候,调用发布函数,把要传送的数据,作为参数传入发布函数中。在要接收数据的地方,提前订阅函数(可以在组件渲染前就订阅),这样,就可以在发布者一发布函数,就接收到!!
<3> context 状态树传参
就是找到要通信的组件的最近父组件,把它作为
Provider
掌控着总数据!!!然后把要通信的组件都看作consumer
- 先定义全局 context 对象
- const GlobalContext = React.createContext();
-
用 < GlobalContext.Provider > 去包括父组件
- 并在标签中,通过设置 value 值来提高服务!!!
- 并在标签中,通过设置 value 值来提高服务!!!
-
用 < GlobalContext.Consumer > 去包括各个消费的子组件!!
- 注意,需要使用回调函数的方式包括
因为这样可以,通过参数 value ,使得消费者可以使用 Provider 提供的服务!!!