React中不常用的功能——Context

React源码版本16.8

跨层级通信 Context

React.createContext创建context对象

Context.Provider父级创建provider传递参数

子组件消费

该 API 订阅单一 context

useContext只可以用在函数组件中或者自定义hook，且第二个参数不会覆盖第一个

ReactContext.js 中的createContext

ReactFiberClassComponent.js 中的constructClassInstance
即Class 组件构造函数初始化

从上可知若contextType是对象且不为null 则将contextType赋值给this.context

从构造函数可以知晓Consumer跟Provider是指向同一个context的，所以实现了跨级访问

在ReactFiberHooks.js中声明了

在HooksDispatcherOnMount或HooksDispatcherOnUpdate中，useContext实际调用的都是readContext

ReactFiberNewContext.js中的readContext

readContext返回context._currentValue

总结
context实现跨级读取访问的根本性就是通过Context组件维护一个稳定对象，在对象内维护一个可变的_currentValue值，供Consumer访问

React源码
React-Context-文档
react组件化——context

热门标签