zh-lx / mini-react

基于 react17.0.2 手写 mini-react,附带实现 hooks 功能
184 stars 23 forks source link

reconcileChildren 两次是不是有问题 #8

Closed proto1994 closed 1 year ago

proto1994 commented 2 years ago

updateClassComponent已经reconcileChildren一次,performUnitOfWork还有reconcileChildren

zh-lx commented 2 years ago

updateClassComponent已经reconcileChildren一次,performUnitOfWork还有reconcileChildren

你好,感谢提问。performUnitOfWork 中的 reconcileChildren 执行条件如下:

let children = workInProgress.element?.props?.children;

let type = workInProgress.element?.type;
if (typeof type === 'function') {
  // 当前 fiber 对应 React 组件时,对其 return 迭代
  if (type.prototype.isReactComponent) {
    // 类组件
    updateClassComponent(workInProgress);
  } else {
    // 函数组件
    updateFunctionComponent(workInProgress);
  }
}

if (children || children === 0) {
  // children 存在时,对 children 迭代
  let elements = Array.isArray(children) ? children : [children];
  // 打平列表渲染时二维数组的情况(暂不考虑三维及以上数组的情形)
  elements = elements.flat();
  reconcileChildren(workInProgress, elements);
}

typeof type === 'function' 条件成立时,此时的 children 一定为 undifined,所以第二段 children || childern === 0 的条件不会成立,因此不会重复执行的。