react使用Context踩坑

1. 问题：在不同文件中使用Provider和Consumer时，出现Consumer中获取不到数据的情况
2. 原因：
   
   当我们分别在App.js中引入CompontA，在common.js中定义了两层组件，此时如果需要把App组件中的数据通过context传递给最下层组件ComponentB，可以通过上述写法进行传递。但是，需要注意的是，切勿在App.js和common.js中重复执行createContext()，因为两个文件都执行createContext()的话就会生成两个Context对象，也就相当于App.js的Provider和common.js的Consumer毫无联系了，会导致ComponentB获取不到App所传递的数据。
3. 正确做法：定义一个中间件context.js，需要使用Provider和Consumer的组件都引入这个文件即可。