React.withContext和getChildContext

Posted 2023-03-20

参考技术A 1、React.withContext会执行一个指定上下文信息的回调函数，任何在这个回调函数里面渲染的组件都有这个context访问权限（我对这句话的理解是：为这个组件指定了context）
（1）情况一：任何想访问context里面的属性的组件都必须显示的指定一个contextTypes的属性，如果没有指定该属性，那么组件通过this.context访问属性将会出错。

（2）情况二：如果你为一个组件（这里指组件A）指定了context，那么这个组件的子组件（这里指组件B）只要定义了contextTypes，就可以访问到父组件指定的context了。

（3）上边情况二中可以看出我们会在文件中引入两个组件，那为了减少文件的引用，我们可以把contextTypes放在minx中，这样用到的组件引用这个minx就可以了。

2、getChildContext：与访问context属性需要通过contextTypes指定可访问的属性一样，getChildContext指定的传递给子组件的属性需要先通过childContextTypes来执行，不然会报错。
（1）情况一：

（2）情况二：假设应用程序有多层的context。通过withContext和getChildContext指定的context元素都可以被子组件引用。但是子组件是需要通过contextTypes来指定所需要的context元素的。

（3）context是就近引用的，如果你通过withContext指定了context元素，然后又通过getChildContext指定了该元素，该元素的值将会被覆盖。

总结：通过context传递属性的方式可以大量减少通过props逐层传递属性的方式，这样可以直接减少组件之间的依赖关系（我之前有一篇文章提到了context可以跨组件传值，大概就是这个意思吧~）

参考文章：
React 中使用context实现数据穿越
react中context学习

相关文章：
深入浅出React高阶组件
React进阶之高阶组件