React 源码笔记

// https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/scheduler/src/forks/SchedulerHostConfig.default.js#L119
// Scheduler periodically yields in case there is other work on the main
// thread, like user events. By default, it *yields multiple times per frame*.
// It does not attempt to align with frame boundaries, since most tasks don't
// need to be frame aligned; for those that do, use requestAnimationFrame.
let yieldInterval = 5; // 5ms

// https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactFiber.new.js#L117
function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Instance
  this.tag = tag; 			// 组件类型：Function，Class，Host（原生）
  this.key = key;			// key 属性
  this.elementType = null;
  this.type = null; 		// 对于 FunctionComponent 指函数本身；对于 ClassComponent 指 class；对于 HostComponent 指 DOM 节点 tagName

  this.stateNode = null;

  // 用于连接其他 Fiber 节点形成 Fiber 树
  this.return = null;		// 指向父级 Fiber 节点（指节点执行完 completeWork 后会返回的下一个节点，子 Fiber 节点及其兄弟节点完成工作后会返回其父级节点）
  this.child = null;		// 指向子 Fiber 节点
  this.sibling = null;		// 指向右边第一个兄弟 Fiber 节点
  this.index = 0;

  this.ref = null;

  // 保存本次更新造成的状态改变的相关信息
  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;

  // 保存本次更新会进行的 DOM 操作
  this.effectTag = NoEffect;
  this.nextEffect = null;

  this.firstEffect = null;
  this.lastEffect = null;

  // 调度优先级相关
  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  // 指向该 Fiber在另一次更新时对应的 Fiber
  this.alternate = null;
}

// https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react/src/ReactElement.js#L348
export function createElement(type, config, children) {
  let propName;

  const props = {};

  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  if (config != null) {
    // 将 config 处理后赋值给 props
    // ...
  }

  const childrenLength = arguments.length - 2;
  // 处理 children，会被赋值给 props.children
  // ...

  // 处理 defaultProps
  // ...

  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // 标记这是个 React Element
    $$typeof: REACT_ELEMENT_TYPE,

    type: type,
    key: key,
    ref: ref,
    props: props,
    _owner: owner,
  };

  return element;
};

// https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react/src/ReactElement.js#L547
export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}

AppClass instanceof Function === true;
AppFunc instanceof Function === true;

// https://github.com/facebook/react/blob/970fa122d8188bafa600e9b5214833487fbf1092/packages/react-reconciler/src/ReactFiberWorkLoop.new.js#L1599
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}
function performUnitOfWork(fiber) {
  // 执行 beginWork，根据传入的当前 Fiber 节点 创建子 Fiber 节点
  // https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L3075

  if (fiber.child) {
    performUnitOfWork(fiber.child);
  }

  // 执行 completeWork

  if (fiber.sibling) {
    performUnitOfWork(fiber.sibling);
  }
}

function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes
): Fiber | null {

  // update：如果 current 存在可优化的路径，就直接复用 current（即上一次更新的 Fiber 节点）
  if (current !== null) {
    const oldProps = current.memoizedProps;
    const newProps = workInProgress.pendingProps;

    if (
      oldProps !== newProps ||
      hasLegacyContextChanged() ||
      (__DEV__ ? workInProgress.type !== current.type : false)
    ) {
      didReceiveUpdate = true;
    } else if (!includesSomeLane(renderLanes, updateLanes)) { // 当前 Fiber 节点优先级不够
      didReceiveUpdate = false;
      switch (workInProgress.tag) {
        // ...
      }
      return bailoutOnAlreadyFinishedWork(
        current,
        workInProgress,
        renderLanes,
      );
    } else {
      didReceiveUpdate = false;
    }
  } else {
    didReceiveUpdate = false;
  }

  // mount 时：根据 tag 不同，创建不同的子 Fiber 节点
  // 常见的组件类型（如 FunctionComponent，ClassComponent，HostComponent），最终会进入 reconcileChildren
  switch (workInProgress.tag) {
    case IndeterminateComponent: 
      // ...
    case LazyComponent: 
      // ...
    case FunctionComponent: 
      // ...
    case ClassComponent: 
      // ...
    case HostRoot:
      // ...
    case HostComponent:
      // ...
    case HostText:
      // ...
    // ...
  }
}

// https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L233
// 生成新的子 Fiber 节点并赋值给 workInProgress.child，作为本次 beginWork 返回值，
// 并作为下次执行 performUnitOfWork 的 workInProgress 参数
export function reconcileChildren(
  current: Fiber | null,
  workInProgress: Fiber,
  nextChildren: any,
  renderLanes: Lanes
) {
  if (current === null) {
    // mount 的组件
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
  } else {
    // update 的组件（会为生成的 Fiber 节点带上 effectTag 属性）
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderLanes,
    );
  }
}

// https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js#L673
function completeWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
  const newProps = workInProgress.pendingProps;

  switch (workInProgress.tag) {
    case IndeterminateComponent:
    case LazyComponent:
    case SimpleMemoComponent:
    case FunctionComponent:
    case ForwardRef:
    case Fragment:
    case Mode:
    case Profiler:
    case ContextConsumer:
    case MemoComponent:
      return null;
    case ClassComponent: {
      // ...
      return null;
    }
    case HostRoot: {
      // ...
      updateHostContainer(workInProgress);
      return null;
    }
    case HostComponent: {
      popHostContext(workInProgress);
	  const rootContainerInstance = getRootHostContainer();
	  const type = workInProgress.type;

	  if (current !== null && workInProgress.stateNode != null) {
		// update
		// ...
		// Fiber 节点已经存在对应 DOM 节点，不需要生成 DOM 节点，需要做的主要是处理 props；
		// updateHostComponent 内部，处理完的 props 被赋值给 workInProgress.updateQueue，并最终在 commit 阶段被渲染在页面上。
		updateHostComponent(
		  current,
		  workInProgress,
		  type,
		  newProps,
		  rootContainerInstance,
		);
	  } else {
		// mount
		// ...
		const currentHostContext = getHostContext();
		// 为 Fiber 创建对应 DOM 节点
		const instance = createInstance(
		  type,
		  newProps,
		  rootContainerInstance,
		  currentHostContext,
		  workInProgress,
		);
		// 将子孙 DOM 节点插入刚生成的 DOM 节点中
		appendAllChildren(instance, workInProgress, false, false);
		// DOM 节点赋值给 fiber.stateNode
		workInProgress.stateNode = instance;

		// 处理 props
		if (
		  finalizeInitialChildren(
			instance,
			type,
			newProps,
			rootContainerInstance,
			currentHostContext,
		  )
		) {
		  markUpdate(workInProgress);
		}
	  }
	  return null;
    }
  // ...