React12-context的api原理

240 阅读1分钟

1.stack

1.更新节点相关信息入栈(beginwork刚好是从头到尾入栈信息)

2.完成节点更新相关信息出栈(completeunitofwork是从尾到头出栈信息)

3.采用不同的cursor记录不同的信息 比如新老context api 所有信息都在这个stack中 用cursor区分开

2.legacyContext(老的context)

1.性能消耗很大 在beginwork时候会判断是否context变化来判断子组件是否要更新

2.相同的key存在,后者会覆盖前者 新的就是根据cosumer来自哪个context就用哪个value

3.新context

1.组件化的使用方式

2.context 提供和订阅都是独立的

3.没性能影响

4.主要地方

1.updateProvider

判断新旧value有无发生变化 有变化则把新的value放到该provider对应的context里面,然后对遍历所有子节点 看这个节点的contextDepencyItem有没有当前的context,是的话则表示该节点依赖这个context,那么对他进行更新,是类组件则创建update,否则更新expirationTime表示该组件这轮要更新

2.updateConsume

读取context里面最新的value,设置contextItem链(为了后面可以一个函数组件用hooks使用多个context) 放到firstContextDependency上(方便provider知道哪些组件是depency) ,也方便useProvider判断这个组件是不是依赖这个context,执行cosumer的children函数 即返回新的children 去reconcileChildren

3.如果是普通的类组件有这个context,那么updateProvider的时候这个类组件有了update,这轮会更新

4.如果是useContext,则直接读取传进来context,把他加到函数组件fiber的contextDepencyItem的链上,再返回context.currentValue即可