react源码解析17.context 视频课程（高效学习）：进入课程 课程目录： 1.开篇介绍和面试题
2.react的设计理念
3.react源码架构
4.源码目录结构和调试
5.jsx&核心api
6.legacy和concurrent模式入口函数
7.Fiber架构
8.render阶段
9.diff算法
10.commit阶段
11.生命周期
12.状态更新流程
13.hooks源码
14.手写hooks
15.scheduler&Lane
16.concurrent模式
17.context
18事件系统
19.手写迷你版react
20.总结&第一章的面试题解答
21.demo
查看视频调试demo_7 context流程图
文章图片


文章图片

cursor/valueStack react源码中存在一个valueStack和valueCursor用来记录context的历史信息和当前context，另外还有一个didPerformWorkStackCursor用来表示当前的context有没有变化

//ReactFiberNewContext.new.js const valueCursor: StackCursor = createCursor(null);

const didPerformWorkStackCursor: StackCursor = createCursor(false);

//ReactFiberStack.new.js const valueStack: Array = [];

function pushProvider(providerFiber, nextValue) { var context = providerFiber.type._context; { push(valueCursor, context._currentValue, providerFiber); context._currentValue = https://www.it610.com/article/nextValue; } }

function popProvider(providerFiber) { var currentValue = https://www.it610.com/article/valueCursor.current; pop(valueCursor, providerFiber); var context = providerFiber.type._context; { context._currentValue = currentValue; } }

• 在render阶段调用updateContextProvider的时候会执行pushProvider，将新的值push进valueStack中
• 在commit阶段调用completeWork的时候会执行popProvider，将栈顶context pop出来，

为什么会有这样一个机制呢，因为我们的context是跨层级的，在之前讲到render阶段和commit阶段的时候，我们会以深度优先遍历的方式遍历节点，如果涉及跨层级读取状态就有点力不从心了，就需要一层一层往下传递我们的props，所以我们可以用一个stack记录我们的context，在render阶段pushProvider，在commit阶段popProvider，在每个具体的层级能根据valueCursor取当前value
createContext

export function createContext( defaultValue: T, calculateChangedBits: ?(a: T, b: T) => number, ): ReactContext { if (calculateChangedBits === undefined) {//可以传入计算bit的函数 calculateChangedBits = null; } else { //... }const context: ReactContext = { $$typeof: REACT_CONTEXT_TYPE, _calculateChangedBits: calculateChangedBits,//计算value变化的函数 _currentValue: defaultValue,//dom环境的value _currentValue2: defaultValue,//art环境的value _threadCount: 0, Provider: (null: any), Consumer: (null: any), }; context.Provider = { $$typeof: REACT_PROVIDER_TYPE, _context: context, }; if (__DEV__) {} else { context.Consumer = context; }return context; }//示例 const NameChangedBits = 0b01; const AgeChangedBits =0b10; const AppContext = createContext({}, (prevValue, nextValue) => { let result = 0; if (prevValue.name !== nextValue.name) { result |= NameChangedBits; }; if (prevValue.age !== nextValue.age) { result |= AgeChangedBits; }; return result; });

在简化之后的createContext中可以看到，context和Provider、Consumer的关系是这样的：

context.Provider = { $$typeof: REACT_PROVIDER_TYPE, _context: context, }; context.Consumer = context;

useContext useContext会调用readContext，readContext会创建dependce，加入当前fiber的dependencies链表中

function readContext(context, observedBits) { { if (lastContextWithAllBitsObserved === context) ; else if (observedBits === false || observedBits === 0) ; else { var resolvedObservedBits; //生成resolvedObservedBits if (typeof observedBits !== 'number' || observedBits === MAX_SIGNED_31_BIT_INT) { lastContextWithAllBitsObserved = context; resolvedObservedBits = MAX_SIGNED_31_BIT_INT; } else { resolvedObservedBits = observedBits; }var contextItem = {//生成dependce context: context, observedBits: resolvedObservedBits, next: null }; if (lastContextDependency === null) { //...lastContextDependency = contextItem; currentlyRenderingFiber.dependencies = {//dependencies链表的第一个 lanes: NoLanes, firstContext: contextItem, responders: null }; } else { lastContextDependency = lastContextDependency.next = contextItem; //加入dependencies链表 } }returncontext._currentValue ; }

provider/customer 在render阶段会调用updateContextProvider，注意几个关键的步骤

• pushProvider：将当前context加入valueStack
• calculateChangedBits：useContext可以设置observedBits，没有设置的话就是MAX_SIGNED_31_BIT_INT，也就是31位1，用于计算changedBits，这个计算context是否变化的过程就发生在calculateChangedBits函数中，用这样的方式可以提高context变化之后的性能
• bailoutOnAlreadyFinishedWork/propagateContextChange：如果changedBits没有改变则走bailoutOnAlreadyFinishedWork的逻辑，跳过当前节点的更新，如果改变则执行propagateContextChange

function updateContextProvider(current, workInProgress, renderLanes) { var providerType = workInProgress.type; var context = providerType._context; var newProps = workInProgress.pendingProps; var oldProps = workInProgress.memoizedProps; var newValue = https://www.it610.com/article/newProps.value; //...pushProvider(workInProgress, newValue); if (oldProps !== null) { var oldValue = oldProps.value; var changedBits = calculateChangedBits(context, newValue, oldValue); if (changedBits === 0) {//context没有改变 if (oldProps.children === newProps.children && !hasContextChanged()) { return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes); } } else {//context改变了 propagateContextChange(workInProgress, context, changedBits, renderLanes); } }var newChildren = newProps.children; reconcileChildren(current, workInProgress, newChildren, renderLanes); return workInProgress.child; }

function calculateChangedBits(context, newValue, oldValue) { if (objectIs(oldValue, newValue)) { //没有改变 return 0; } else { var changedBits = typeof context._calculateChangedBits === 'function' ? context._calculateChangedBits(oldValue, newValue) : MAX_SIGNED_31_BIT_INT; { if ((changedBits & MAX_SIGNED_31_BIT_INT) !== changedBits) { error('calculateChangedBits: Expected the return value to be a ' + '31-bit integer. Instead received: %s', changedBits); } }return changedBits | 0; } }//示例 const NameChangedBits = 0b01; const AgeChangedBits = 0b10; const AppContext = createContext({}, (prevValue, nextValue) => { let result = 0; if (prevValue.name !== nextValue.name) { result |= NameChangedBits; }; if (prevValue.age !== nextValue.age) { result |= AgeChangedBits; }; return result; });

function propagateContextChange(workInProgress, context, changedBits, renderLanes) { var fiber = workInProgress.child; if (fiber !== null) { fiber.return = workInProgress; //fiber不存在 就找父节点 }while (fiber !== null) { var nextFiber = void 0; //遍历fibervar list = fiber.dependencies; if (list !== null) { nextFiber = fiber.child; var dependency = list.firstContext; while (dependency !== null) {//遍历dependencies链表 if (dependency.context === context && (dependency.observedBits & changedBits) !== 0) { //有变化 if (fiber.tag === ClassComponent) { //创建新的update var update = createUpdate(NoTimestamp, pickArbitraryLane(renderLanes)); update.tag = ForceUpdate; enqueueUpdate(fiber, update); }fiber.lanes = mergeLanes(fiber.lanes, renderLanes); //合并优先级 var alternate = fiber.alternate; if (alternate !== null) { alternate.lanes = mergeLanes(alternate.lanes, renderLanes); }scheduleWorkOnParentPath(fiber.return, renderLanes); //更新祖先节点的优先级list.lanes = mergeLanes(list.lanes, renderLanes); break; }dependency = dependency.next; } } //... nextFiber = fiber.sibling; } else { nextFiber = fiber.child; } //...fiber = nextFiber; } }

【react源码解析17.context】updateContextConsumer关键的代码如下，执行prepareToReadContext判断优先级是否足够加入当前这次render，readContext取到当前context的value

function updateContextConsumer(current, workInProgress, renderLanes) { var context = workInProgress.type; //... prepareToReadContext(workInProgress, renderLanes); var newValue = https://www.it610.com/article/readContext(context, newProps.unstable_observedBits); var newChildren; { ReactCurrentOwner$1.current = workInProgress; setIsRendering(true); newChildren = render(newValue); setIsRendering(false); }//... workInProgress.flags |= PerformedWork; reconcileChildren(current, workInProgress, newChildren, renderLanes); return workInProgress.child; }

推荐阅读

• 

  电脑上显示无信号怎么办（电脑上显示无信号怎么处理）
• 

  佳能760d新手教程 佳能760d教程
• 

  烟灰缸里为什么不能倒水？烟灰缸不能倒水跟结婚有什么关系
• 

  awk|awk if print
• 

  兄弟打印机9310硒鼓单元的正确使用方法和注意事项
• 

  东鹏美容花洒质量怎么样？东鹏美容花洒如何安装
• 

  红酒可以过安检吗 火车安检红酒能过吗
• 

  手机内部结构图，手机构造分析
• 

  高铁票价格查询表 「最新火车时刻表」
• 

  柴进的性格特点 柴进的性格特点介绍
• 

  苹果airplay在哪里开启 airplay在哪里打开
• 

  癌症|为何我国被称为癌症大国，难道是过量吃肉？提醒：这4种肉要少吃
• 

  怎么编写关机程序，关机编程怎么编
• 

  爱普生L805不用清零
• 

  如何连接音响蓝牙 如何链接音响，如何连接音响设备
• 

  脱腿毛多少钱
• 

  投稿|大象转身牵一发动全身，阿里推猫享不仅仅对标京东
• 

  婴儿医保怎么办理 婴儿医保如何办理
• 

  速冻虾尾怎么做好吃
• 

  ps礼花效果制作 Photoshop设计礼花效果的图文详细步骤

• Android事件传递源码分析
• react|react 安装
• Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
• Java内存泄漏分析系列之二（jstack生成的Thread|Java内存泄漏分析系列之二：jstack生成的Thread Dump日志结构解析）
• [源码解析]|[源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)
• ffmpeg源码分析01（结构体）
• Android系统启动之init.rc文件解析过程
• Java程序员阅读源码的小技巧，原来大牛都是这样读的，赶紧看看！
• 小程序有哪些低成本获客手段——案例解析
• Vue源码分析—响应式原理(二)