React16源码: React中context-stack的源码实现
context-stack
1 ) 概述
- 在 context 内部有一个概念是 stack
- 有一个唯一的stack
- 里面保存各种各样的东西
- stack的特性
- 在更新节点的时候，会把相关的信息入栈
- 在因为stack就是栈，在里面会存储各种各样的信息
- 在更新节点的时候，每一个节点的信息都会推入这个stack
- 完成节点更新的时候，相关的信息需要出栈
- 因为栈是一个先入后出的这么一个数据结构
- 这正好对应于 react的更新过程中的 beginWork 是从头到尾
- 沿着子树的一侧这么下来的一个过程，这个时候我们从头到尾，推入了相关的信息
- 然后在 completeUnitOfWork 的时候，我们又是从尾到头去进行一个完成节点更新的操作
- 这个时候刚好是一个相反的顺序
- 在这个相反的顺序当中，又可以同时出栈，这样的话, 就可以保证我们的栈从更新开始到最终更新结束
- 因为从更新开始到更新结束，都是要回到 root 节点，它这个栈更新开始的时候是空的
- 更新结束的时候，也刚好变成一个空的状态
- 这就是在更新时入栈，在完成节点时出栈
- 在这个栈的数据结构中可以用不同的cursor来记录不同的信息
- react的这个stack的实现过程中，它需要存的信息是非常多的
- 比如说有新的 contextAPI 也有老的 contextAPI
- 还有跟 HostComponent 相关的一些信息，还有container相关的一些信息
- 这些信息之间是互不干涉，没有任何关联的，这些信息都要存在同一个stack里面
- 通过 cursor 去标记这些相关性的信息自己处于哪个位置
- 在更新节点的时候，会把相关的信息入栈
2 ）源码
定位到 packages/react-reconciler/src/ReactFiberStack.js
/*** Copyright (c) Facebook, Inc. and its affiliates.** This source code is licensed under the MIT license found in the* LICENSE file in the root directory of this source tree.** @flow*/import type {Fiber} from './ReactFiber';import warningWithoutStack from 'shared/warningWithoutStack';export type StackCursor<T> = {current: T,
};const valueStack: Array<any> = [];let fiberStack: Array<Fiber | null>;if (__DEV__) {fiberStack = [];
}let index = -1;function createCursor<T>(defaultValue: T): StackCursor<T> {return {current: defaultValue,};
}function isEmpty(): boolean {return index === -1;
}function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {if (index < 0) {if (__DEV__) {warningWithoutStack(false, 'Unexpected pop.');}return;}if (__DEV__) {if (fiber !== fiberStack[index]) {warningWithoutStack(false, 'Unexpected Fiber popped.');}}cursor.current = valueStack[index];valueStack[index] = null;if (__DEV__) {fiberStack[index] = null;}index--;
}function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {index++;valueStack[index] = cursor.current;if (__DEV__) {fiberStack[index] = fiber;}cursor.current = value;
}function checkThatStackIsEmpty() {if (__DEV__) {if (index !== -1) {warningWithoutStack(false,'Expected an empty stack. Something was not reset properly.',);}}
}function resetStackAfterFatalErrorInDev() {if (__DEV__) {index = -1;valueStack.length = 0;fiberStack.length = 0;}
}export {createCursor,isEmpty,pop,push,// DEV only:checkThatStackIsEmpty,resetStackAfterFatalErrorInDev,
};
- 首先定义一个非常重要的变量叫做
valueStack，它是一个数组 - 接下去这边有一个
fiberStack，它只是用于开发的过程当中, 可以先忽略它 - 定义一个全局
index- 注意这个 index 就是对应
valueStack目前存数据存在的哪个位置
- 注意这个 index 就是对应
- 接下去, 声明了一个方法叫做
createCursor- 直接 return 了一个新的对象
- 这个对象里面有一个
current属性 - 在创建的时候传入的一个 defaultValue 给 current 赋值
- 它是一个 pure 的对象，没有任何其他的一些特性
- 注意
- 这整个文件，它对应的是一个模块
- valueStack 定义一些什么东西
- 它里面的所有的数据都是有关联性的
- 主要的数据也就是 valuestack 跟 index 是在这个模块里面
- 它其他的数据都是在外部，使用的时候才会创建的
- 这个 index 它本来是标记 valueStack 对应数据存在哪个位置
- 可以通过它是否等于 -1 来判断我们目前的 valueStack 它是否是一个空的数组
- 接下去的 pop 方法
- 如果 index < 0
- 说明 valueStack 里面没有任何的数据，直接return
- 因为我们没有任何东西是可以推出来的
- 读取 index 在 valueStack 对应的 value 存入 cursor.current
- 因为在推入的时候，就是把老的值存到 valueStack上面，然后新的值它等于新设置的值
- 如果要 pop 的时候，对应的肯定要把老的那个值再赋值回来
- 将 index 对应在 valueStack 中的 value 置空
- 将 index –
- 如果 index < 0
- 接下去的 push 方法
- 它接收的参数 cursor, value, fiber
- cursor 是通过
createCursor这个方法来创建的一个游标对象 - 将 index ++
- 将老的 value (cursor.current) 推入到 栈 当中
- 将当前 cursor.current 指向传进来的 value
- 注意，在一次 push 中新的 value 不会入栈的
checkThatStackIsEmpty- 这个只有在开发时会用到，其实就跟 isEmpty 是一样的
- 它判断一下index是否等于 -1，然后进行一个warning
resetStackAfterFatalErrorInDev- dev 相关变量，无需过多关注
- 就是重置了一些值
- 注意
- 如果在对 valueStack 进行操作的过程中，顺序是不一样的
- 比如说，我有三种不同的数据类型，就有三个不同的cursor
- 3个不同的 cursor 它们推入的这些数据，保存的不一样
- 比如说，我目前这个数组先推入了一个a，然后再推入了一个b，然后再推入了一个c
- 它们分别对应的是 cursor1(c1), cursor2(c2), cursor3(c3)，它们想要读取的数据应该是这样的
- 即 [a, b, c] => c1, c2, c3
- 在 pop 的时候，可能先 pop 了 c1，但是我拿到的是却是 c3 对应的数据 c
- 这个就是我们不想要出现的一个情况，实际上这个文件内没有解决这个问题
- 因为react在更新的过程当中，先从
beginWork里面推数据 - 然后在
completeUnitOfWork里面去提出数据 - 这个过程中，它始终保持着 cursor 的一一对应关系
- 也就是说我推进来的是c1, c2, c3的顺序
- 推出的时候，要先推出 c3，再推出 c2，再推出 c1
- 它们拿到的值都是一个一一对应的关系
- 这是react在使用这个stack模块的时候去控制的
- 而不是在我们这个模块内部去解的这个问题
- 比如说 context 它一个入栈，出栈的一个情况的时候就会有这个调用的过程
- 这个目前先跳过