Skip to content
目录

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,
  );

特性的实现

...待分析

备案号: 浙ICP备2023000081号