mode的类型
typescript
export type TypeOfMode = number;
export const NoContext = 0b000;
export const ConcurrentMode = 0b001;
export const StrictMode = 0b010;
export const ProfileMode = 0b100;1,普通模式,同步渲染,React15-16的生产环境用,
2,并发模式,异步渲染,React17的生产环境用,
3,严格模式,用来检测是否存在废弃API,React16-17开发环境使用,
4,性能测试模式,用来检测哪里存在性能问题,React16-17开发环境使用
Model组件包裹了子组件,接下来,子孙节点都具备这些model的特性;model在react的更新中,并不会产生实质性的Fiber或dom节点
updateMode
typescript
function updateMode(
current: Fiber | null,
workInProgress: Fiber,
renderExpirationTime: ExpirationTime,
) {
// 直接跳过当前组件,进行子节点的调和
const nextChildren = workInProgress.pendingProps.children;
reconcileChildren(
current,
workInProgress,
nextChildren,
renderExpirationTime,
);
return workInProgress.child;
}在创建子孙节点的Fiber的时候,会将父节点的model一层一层的向下传递
createFiberFromElement
typescript
const created = createFiberFromElement(
element,
returnFiber.mode,
expirationTime,
);createFiberFromTypeAndProps
typescript
const fiber = createFiberFromTypeAndProps(
type,
key,
pendingProps,
owner,
mode,
expirationTime,
);typescript
case REACT_CONCURRENT_MODE_TYPE:
return createFiberFromMode(
pendingProps,
mode | ConcurrentMode | StrictMode,
expirationTime,
key,
);
case REACT_STRICT_MODE_TYPE:
return createFiberFromMode(
pendingProps,
mode | StrictMode,
expirationTime,
key,
);特性的实现
...待分析