React Context 解析

2019-12-22  本文已影响0人  FanHu

react  Context 是典型的生产者 <=> 消费者模式

1 使用 React.createContext()  创建一个 reactContext

const LanguageContext = React.createContext();  

2 创建一个生产者。 LanguageContext. Provider就是数据的生产者。  value 中 包含能消费者传递的参数。

生产者

3 创建一个消费者 

const LanguageConsumer = LanguageContext.Consumer; 

消费者

在要用到的数据的地方使用 Consumer 包裹 ,接收到的参数中就会包含,生产者中提供的value 数据.

同理,redux store 中的 Provider  也是使用这个模式包裹了一层,每次子组件需要使用 store  中的数据,需要connect 到 Consumer 中。形成高阶组件,方便数据的传递。

Code : https://github.com/hufans/ReactContext

上一篇 下一篇

猜你喜欢

热点阅读