feat(react-reconciler): 完成 beginWork 源码注释

Author: coderlfm

README-ME.md

@@ -254,6 +254,13 @@ function getOwnerDocumentFromRootContainer(
 function noop() {}
 
 export function trapClickOnNonInteractiveElement(node: HTMLElement) {
+
+  // Mobile Safari不会正确地在非交互式元素上触发冒泡单击事件，这意味着委托的单击侦听器不会触发。
+  // 此bug的解决方案包括在目标节点上附加一个空的单击侦听器。
+  // https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
+  // 只需使用onclick属性设置它，这样我们就不必为它管理任何簿记。不确定侦听器被删除时是否需要清除它。
+  // TODO:只有相关的游猎才能这样做?
+  
   // Mobile Safari does not fire properly bubble click events on
   // non-interactive elements, which means delegated click listeners do not
   // fire. The workaround for this bug involves attaching an empty click
@@ -353,14 +360,16 @@ function updateDOMProperties(
   }
 }
 
+// 开始使用 虚拟 dom 创建真实 dom
 export function createElement(
   type: string,
   props: Object,
   rootContainerElement: Element | Document,
   parentNamespace: string,
 ): Element {
-  let isCustomComponentTag;
+  let isCustomComponentTag;   // 是否自定义标签
 
+  // 拿到 document 对象
   // We create tags in the namespace of their parent container, except HTML
   // tags get no namespace.
   const ownerDocument: Document = getOwnerDocumentFromRootContainer(
@@ -412,6 +421,8 @@ export function createElement(
       // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
       // See discussion in https://github.com/facebook/react/pull/6896
       // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
+
+      // 通过 document 对象创建 真实dom
       domElement = ownerDocument.createElement(type);
       // Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple` and `size`
       // attributes on `select`s needs to be added before `option`s are inserted.
@@ -585,6 +596,8 @@ export function setInitialProperties(
       ReactDOMSelectPostMountWrapper(domElement, rawProps);
       break;
     default:
+
+      // 以下是为了兼容 Safari 浏览器在 非交互元素上不会触发冒泡事件做的空 onClick 的兼容
       if (typeof props.onClick === 'function') {
         // TODO: This cast may not be sound for SVG, MathML or custom elements.
         trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));

src/react/v17.0.2/react-dom/src/client/ReactDOMComponent.js

@@ -33,6 +33,7 @@ import {getParentSuspenseInstance} from './ReactDOMHostConfig';
 import invariant from 'shared/invariant';
 import {enableScopeAPI} from 'shared/ReactFeatureFlags';
 
+// 取一个 0-1 的随机数，再转成 36 进制(a-z 0-9),再去掉前两位小数 0.2i116qjpu7p    一般是为了去重
 const randomKey = Math.random()
   .toString(36)
   .slice(2);
@@ -53,6 +54,7 @@ export function detachDeletedInstance(node: Instance): void {
   delete (node: any)[internalEventHandlesSetKey];
 }
 
+// 给真实 dom 身上添加一个fiber 2i116qjpu7p 它的值是 fiber 虚拟dom
 export function precacheFiberNode(
   hostInst: Fiber,
   node: Instance | TextInstance | SuspenseInstance | ReactScopeInstance,
@@ -199,6 +201,10 @@ export function getFiberCurrentPropsFromNode(
   return (node: any)[internalPropsKey] || null;
 }
 
+// 给真实 dom 身上添加props "__reactProps$2i116qjpu7p" 它的值是 这个元素身上的 props，
+// children: "你好呀"
+// className: "theme-context-child"
+// style: {background: "purple"} 
 export function updateFiberProps(
   node: Instance | TextInstance | SuspenseInstance,
   props: Props,

src/react/v17.0.2/react-dom/src/client/ReactDOMComponentTree.js

@@ -152,6 +152,8 @@ const STYLE = 'style';
 let eventsEnabled: ?boolean = null;
 let selectionInformation: null | SelectionInformation = null;
 
+
+// 判断是否为以下几个元素，并且 props 中是否添加了自动聚焦属性，
 function shouldAutoFocusHostComponent(type: string, props: Props): boolean {
   switch (type) {
     case 'button':
@@ -260,6 +262,7 @@ export function resetAfterCommit(containerInfo: Container): void {
   selectionInformation = null;
 }
 
+// 创建实例 创建元素实体
 export function createInstance(
   type: string,
   props: Props,
@@ -287,13 +290,17 @@ export function createInstance(
   } else {
     parentNamespace = ((hostContext: any): HostContextProd);
   }
+
+  // 创建元素
   const domElement: Instance = createElement(
     type,
     props,
     rootContainerInstance,
     parentNamespace,
   );
+  // 给真实dom 身上添加 fiber 对象 domElement["__reactFiber$2i116qjpu7p"] = internalInstanceHandle
   precacheFiberNode(internalInstanceHandle, domElement);
+  // 给真实dom 身上添加 props 对象 domElement["__reactProps$2i116qjpu7p"] = { children: '你好呀', className: 'theme-context-child' }
   updateFiberProps(domElement, props);
   return domElement;
 }
@@ -313,6 +320,7 @@ export function finalizeInitialChildren(
   hostContext: HostContext,
 ): boolean {
   setInitialProperties(domElement, type, props, rootContainerInstance);
+  //
   return shouldAutoFocusHostComponent(type, props);
 }
 

src/react/v17.0.2/react-dom/src/client/ReactDOMHostConfig.js

@@ -152,14 +152,18 @@ function createRootImpl(
     concurrentUpdatesByDefaultOverride,
   );
 
-  /* 将该容器标记为根, 内部是给容器身上添加一个一个随机数属性 
+  /* 
+  将该容器标记为根, 内部是给容器身上添加一个一个随机数属性 
+  container.__reactContainer$83ljcj61lpa = root.current
   node[internalContainerInstanceKey] = hostRoot;
   container[__reactContainer$+Math.random().toString(36).slice(2)] = root.current;
   */
   markContainerAsRoot(root.current, container);
 
+  // 判断容器的节点类型是否为注释，如果是则使用父容器作为容器，否则就使用容器本身
   const rootContainerElement =
     container.nodeType === COMMENT_NODE ? container.parentNode : container;
+  // 监听所有事件
   listenToAllSupportedEvents(rootContainerElement);
 
   if (mutableSources) {

src/react/v17.0.2/react-dom/src/client/ReactDOMRoot.js

@@ -31,6 +31,7 @@ const setTextContent = function(node: Element, text: string): void {
       return;
     }
   }
+  // react 内部设置文本的方式
   node.textContent = text;
 };
 

src/react/v17.0.2/react-dom/src/client/setTextContent.js

@@ -381,6 +381,7 @@ const listeningMarker =
     .toString(36)
     .slice(2);
 
+// 开始监听所有事件
 export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
   if (!(rootContainerElement: any)[listeningMarker]) {
     (rootContainerElement: any)[listeningMarker] = true;

src/react/v17.0.2/react-dom/src/events/DOMPluginEventSystem.js

@@ -1205,6 +1205,9 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     const created = createFiberFromPortal(portal, returnFiber.mode, lanes);
+    // 给该 fiber 对象的 return 属性指向父 fiber 节点
+    // 传入的是 workInProgress，
+    // 该 created 会 作为 workInProgress.child 的属性（这就是 react fiber 链表）
     created.return = returnFiber;
     return created;
   }

src/react/v17.0.2/react-reconciler/src/ReactChildFiber.old.js

@@ -141,7 +141,7 @@ function FiberNode(
   this.pendingProps = pendingProps; // 新的 props
   this.memoizedProps = null;        // 旧的(上一次) props
   this.updateQueue = null;          // 当前 fiber 的更新队列
-  this.memoizedState = null;        // 旧的(上一次) state
+  this.memoizedState = null;        // 旧的(上一次) state 里面有缓存，react 使用的是 Map 作为缓存
   this.dependencies = null;
 
   this.mode = mode;
@@ -620,6 +620,8 @@ export function createFiberFromTypeAndProps(
     }
   }
 
+  // 给 当前元素创建一个 fiber 对象 
+  // 例如 给 app 创建
   const fiber = createFiber(fiberTag, pendingProps, key, mode);
   fiber.elementType = type;
   fiber.type = resolvedType;

src/react/v17.0.2/react-reconciler/src/ReactFiber.old.js

@@ -249,6 +249,7 @@ if (__DEV__) {
   didWarnAboutDefaultPropsOnFunctionComponent = {};
 }
 
+// 调和 children 
 export function reconcileChildren(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -1157,9 +1158,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
 
+  debugger;
   // 克隆更新队列
   cloneUpdateQueue(current, workInProgress);
-  // 计算到新的 state
+  // 计算到新的 state 给 memoizedState 添加上值  cache，element
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
   // 取到新的 state
   const nextState = workInProgress.memoizedState;
@@ -1168,6 +1170,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
 
   // 启用缓存， 暂时没看
   if (enableCache) {
+    // 拿到缓存
     const nextCache: Cache = nextState.cache;
     pushRootCachePool(root);
     pushCacheProvider(workInProgress, nextCache);
@@ -1254,8 +1257,11 @@ function updateHostComponent(
   const prevProps = current !== null ? current.memoizedProps : null;
 
   let nextChildren = nextProps.children;
+
+  // 是否只有一个文本子节点
   const isDirectTextChild = shouldSetTextContent(type, nextProps);
 
+  // 如果只有一个文本子节点，则不会给给文本子节点生成 fiber 节点
   if (isDirectTextChild) {
     // We special case a direct text child of a host node. This is a common
     // case. We won't handle it as a reified child. We will instead handle
@@ -3500,7 +3506,7 @@ function beginWork(
   // move this assignment out of the common path and into each branch.
   workInProgress.lanes = NoLanes;
 
-  debugger;
+  // debugger;
 
   // 判断是哪一个 tag 类型
   switch (workInProgress.tag) {