日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
const list = [1,2,3];
  
  
  
  
const container = document.createElement('div');
  
  
  
  
for (let i = 0; i < list.length; i ++) {
  
  
  
  
    const newDom = document.createElement('div');
  
  
  
  
    newDom.innerHTML = list[i];
  
  
  
  
    container.appendChild(newDom);
  
  
  
  
}
  
  
  
  
document.body.appendChild(container);
 
 
 
 

 
 
 
 

  
  
  
  
const list = [1,2,3];
  
  
  
  
const container = document.createElement('div');
  
  
  
  

  
  
  
  
const Demo = () =>
  
  
  
  
(

  
  
  
  
    {list.map((item) => 
{item}
)}
  
  
  
  

 
 
 
 

  
  
  
  
export function createElement(type, config, children) {
  
  
  
  
  let propName;
  
  
  
  

  
  
  
  
  // Reserved names are extracted
  
  
  
  
  const props = {};
  
  
  
  

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

  
  
  
  
const ReactElement = function(type, key, ref, self, source, owner, props) {
  
  
  
  
  const element = {
  
  
  
  
    // This tag allows us to uniquely identify this as a React Element
  
  
  
  
    $typeof: REACT_ELEMENT_TYPE,
  
  
  
  

  
  
  
  
    // Built-in properties that belong on the element
  
  
  
  
    type: type,
  
  
  
  
    key: key,
  
  
  
  
    ref: ref,
  
  
  
  
    props: props,
  
  
  
  

  
  
  
  
    // Record the component responsible for creating this element.
  
  
  
  
    _owner: owner,
  
  
  
  
  };
  
  
  
  
  ...
  
  
  
  
  return element;
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
function Count({count, onCountClick}) {
  
  
  
  
  return  { onCountClick()}}>
  
  
  
  
  count: {count}
  
  
  
  
  

 
 
 
 

  
  
  
  
function FiberNode(
  
  
  
  
  tag: WorkTag,
  
  
  
  
  pendingProps: mixed,
  
  
  
  
  key: null | string,
  
  
  
  
  mode: TypeOfMode,
  
  
  
  
) {
  
  
  
  
  // Instance
  
  
  
  
  this.tag = tag;            // 標(biāo)識(shí)節(jié)點(diǎn)類型，例如函數(shù)組件、類組件、普通標(biāo)簽等
  
  
  
  
  this.key = key;
  
  
  
  
  this.elementType = null;  // 標(biāo)識(shí)具體 jsx 標(biāo)簽名
  
  
  
  
  this.type = null;        // 類似 elementType
  
  
  
  
  this.stateNode = null;  // 對(duì)應(yīng)的真實(shí) DOM 節(jié)點(diǎn)
  
  
  
  

  
  
  
  
  // Fiber
  
  
  
  
  this.return = null;    // 父節(jié)點(diǎn)
  
  
  
  
  this.child = null;     // 第一個(gè)子節(jié)點(diǎn)
  
  
  
  
  this.sibling = null;   // 第一個(gè)兄弟節(jié)點(diǎn)
  
  
  
  
  this.index = 0;
  
  
  
  

  
  
  
  
  this.ref = null;
  
  
  
  

  
  
  
  
  this.pendingProps = pendingProps;  // 傳入的 props
  
  
  
  
  this.memoizedProps = null;    
  
  
  
  
  this.updateQueue = null;   // 狀態(tài)更新相關(guān)
  
  
  
  
  this.memoizedState = null;
  
  
  
  
  this.dependencies = null;
  
  
  
  

  
  
  
  
  this.mode = mode;
  
  
  
  

  
  
  
  
  // Effects
  
  
  
  
  this.flags = NoFlags;
  
  
  
  
  this.subtreeFlags = NoFlags;
  
  
  
  
  this.deletions = null;
  
  
  
  

  
  
  
  
  this.lanes = NoLanes;
  
  
  
  
  this.childLanes = NoLanes;
  
  
  
  

  
  
  
  
  this.alternate = null;
  
  
  
  
  ...
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  

  
  
  
  
     
  
  
  
  
// App.jsx    
  
  
  
  
    

  
  
  
  
      

  
  
  
  
        
  
  
  
  
        

  
  
  
  
          text
  
  
  
  
        

  
  
  
  
        
  
  
  
  
      
  
  
  
  
    

 
 
 
 

  
  
  
  
function workLoopSync() {
  
  
  
  
  // Already timed out, so perform work without checking if we need to yield.
  
  
  
  
  while (workInProgress !== null) {
  
  
  
  
    performUnitOfWork(workInProgress);
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
switch (workInProgress.tag) {
  
  
  
  
    case FunctionComponent: {
  
  
  
  
      ...
  
  
  
  
    }
  
  
  
  
    case ClassComponent: {
  
  
  
  
      ...
  
  
  
  
    }
  
  
  
  
    case HostRoot: {
  
  
  
  
      ...
  
  
  
  
    }
  
  
  
  
    case HostComponent: {
  
  
  
  
      ...
  
  
  
  
    }
  
  
  
  
    ...
  
  
  
  
  }
 
 
 
 

 
 
 
 

  
  
  
  
if (current !== null) {
  
  
  
  
    // 這里處理一些依賴
  
  
  
  
    if (
  
  
  
  
      enableLazyContextPropagation &&
  
  
  
  
      !includesSomeLane(renderLanes, updateLanes)
  
  
  
  
    ) {
  
  
  
  
      const dependencies = current.dependencies;
  
  
  
  
      if (dependencies !== null && checkIfContextChanged(dependencies)) {
  
  
  
  
        updateLanes = mergeLanes(updateLanes, renderLanes);
  
  
  
  
      }
  
  
  
  
    }
  
  
  
  

  
  
  
  
    const oldProps = current.memoizedProps;
  
  
  
  
    const newProps = workInProgress.pendingProps;
  
  
  
  

  
  
  
  
    if (
  
  
  
  
      oldProps !== newProps ||
  
  
  
  
      hasLegacyContextChanged() ||
  
  
  
  
      // Force a re-render if the implementation changed due to hot reload:
  
  
  
  
      (__DEV__ ? workInProgress.type !== current.type : false)
  
  
  
  
    ) {
  
  
  
  
      // 如果 props 或者 context 變了
  
  
  
  
      didReceiveUpdate = true;
  
  
  
  
    } else if (!includesSomeLane(renderLanes, updateLanes)) {
  
  
  
  
      didReceiveUpdate = false;
  
  
  
  
      // 走到這里則說(shuō)明符合優(yōu)化條件
  
  
  
  
      switch (workInProgress.tag) {
  
  
  
  
        case HostRoot:
  
  
  
  
          ...
  
  
  
  
          break;
  
  
  
  
        case HostComponent:
  
  
  
  
          ...
  
  
  
  
          break;
  
  
  
  
        case ClassComponent: {
  
  
  
  
          ...
  
  
  
  
          break;
  
  
  
  
        }
  
  
  
  
        case HostPortal:
  
  
  
  
          ...
  
  
  
  
          break;
  
  
  
  
        case ContextProvider: {
  
  
  
  
          ...
  
  
  
  
          break;
  
  
  
  
        }
  
  
  
  
        ...
  
  
  
  
        
  
  
  
  
      }
  
  
  
  
      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
  
  
  
  
    } else {
  
  
  
  
      ...
  
  
  
  
      didReceiveUpdate = false;
  
  
  
  
    }
  
  
  
  
  } else {
  
  
  
  
    didReceiveUpdate = false;
  
  
  
  
  }
 
 
 
 

 
 
 
 

  
  
  
  
function App() {
  
  
  
  
    return 
  
  
  
  
}
  
  
  
  

  
  
  
  
function Demo() {
  
  
  
  
    const [v, setV] = useState();
  
  
  
  
    return (
  
  
  
  
        

  
  
  
  
            
  
  
  
  
            
  
  
  
  
        

 
 
 
 

  
  
  
  
function App() {
  
  
  
  
    return 
  
  
  
  
        
  
  
  
  
    
  
  
  
  
}
  
  
  
  

  
  
  
  
function Demo(props) {
  
  
  
  
    const [v, setV] = useState();
  
  
  
  
    return (
  
  
  
  
        

  
  
  
  
            
  
  
  
  
           {props.children}
  
  
  
  
        

更新當(dāng)前節(jié)點(diǎn)

通過(guò)上面的解析我們知道，當(dāng)不走優(yōu)化邏輯時(shí) 「beginWork」 使用大量的 switch...case 來(lái)分別處理不同類型的組件，下來(lái)我們以我們熟悉的 Function Component 為例。

「核心就是通過(guò)調(diào)用函數(shù)組件，得到組件的返回的 element?！?/p>

類似地，對(duì)于類組件，則是調(diào)用組件實(shí)例的 render 方法得到 element。

而對(duì)于我們普通的組件，例如

 
 
 
 

  
  
  
  
function updateFunctionComponent(
  
  
  
  
  current,
  
  
  
  
  workInProgress,
  
  
  
  
  Component,
  
  
  
  
  nextProps: any,
  
  
  
  
  renderLanes,
  
  
  
  
) {
  
  
  
  
  let context;
  
  
  
  
  if (!disableLegacyContext) {
  
  
  
  
    const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
  
  
  
  
    context = getMaskedContext(workInProgress, unmaskedContext);
  
  
  
  
  }
  
  
  
  
  let nextChildren;
  
  
  
  
  prepareToReadContext(workInProgress, renderLanes);
  
  
  
  
  // 執(zhí)行組件函數(shù)獲取返回的 element
  
  
  
  
  nextChildren = renderWithHooks(
  
  
  
  
    current,
  
  
  
  
    workInProgress,
  
  
  
  
    Component,
  
  
  
  
    nextProps,
  
  
  
  
    context,
  
  
  
  
    renderLanes,
  
  
  
  
  );
  
  
  
  
  
  
  
  
  
  // React DevTools reads this flag.
  
  
  
  
  workInProgress.flags |= PerformedWork;
  
  
  
  
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  
  
  
  
  return workInProgress.child;
  
  
  
  
}
 
 
 
 

得到組件返回的 element(s) 之后，下一步就是為他們生成 Fiber，我們查看源碼可以看到，不論是函數(shù)組件或是類組件或是普通組件，最后返回的 element(s) 都會(huì)作為參數(shù)傳入到 「reconcileChildren」 中。

介紹 「reconcileChildren」 之前我們先用一張圖總結(jié)一下 「beginWork」 的大致流程：

生成子節(jié)點(diǎn)

經(jīng)過(guò)上一步得到 workInProgress 的 children 之后，接下來(lái)需要為這些 children element 生成 Fiber ，這就是 「reconcileChildFibers」 函數(shù)做的事情，這也是我們經(jīng)常提到的 diff 的過(guò)程。

這個(gè)函數(shù)里主要分兩種情況處理，如果是 newChild(即 children element)是 object 類型，則進(jìn)入單節(jié)點(diǎn) diff 過(guò)程(「reconcileSingleElement」)，如果是數(shù)組類型，則進(jìn)入多節(jié)點(diǎn) diff 過(guò)程(「reconcileChildrenArray」)。

 
 
 
 

  
  
  
  
function reconcileChildFibers(
  
  
  
  
    returnFiber: Fiber,
  
  
  
  
    currentFirstChild: Fiber | null,
  
  
  
  
    newChild: any,
  
  
  
  
    lanes: Lanes,
  
  
  
  
  ): Fiber | null {
  
  
  
  
    if (typeof newChild === 'object' && newChild !== null) {
  
  
  
  
      switch (newChild.$typeof) {
  
  
  
  
        case REACT_ELEMENT_TYPE:
  
  
  
  
          return placeSingleChild(
  
  
  
  
            reconcileSingleElement(
  
  
  
  
              returnFiber,
  
  
  
  
              currentFirstChild,
  
  
  
  
              newChild,
  
  
  
  
              lanes,
  
  
  
  
            ),
  
  
  
  
          );
  
  
  
  
        ...
  
  
  
  
      }
  
  
  
  
      if (isArray(newChild)) {
  
  
  
  
        return reconcileChildrenArray(
  
  
  
  
          returnFiber,
  
  
  
  
          currentFirstChild,
  
  
  
  
          newChild,
  
  
  
  
          lanes,
  
  
  
  
        );
  
  
  
  
      }
  
  
  
  
      throwOnInvalidObjectType(returnFiber, newChild);
  
  
  
  
    }
  
  
  
  
    
  
  
  
  
}   
 
 
 
 

單節(jié)點(diǎn)diff

 
 
 
 

  
  
  
  
function reconcileSingleElement(
  
  
  
  
    returnFiber: Fiber,
  
  
  
  
    currentFirstChild: Fiber | null,
  
  
  
  
    element: ReactElement,
  
  
  
  
    lanes: Lanes,
  
  
  
  
  ): Fiber {
  
  
  
  
    const key = element.key;
  
  
  
  
    let child = currentFirstChild;
  
  
  
  
    while (child !== null) {
  
  
  
  
    
  
  
  
  
      // 首先比較 key 是否相同
  
  
  
  
      if (child.key === key) {
  
  
  
  
        const elementType = element.type;
  
  
  
  
        ...
  
  
  
  
           // 然后比較 elementType 是否相同
  
  
  
  
          if (child.elementType === elementType) {
  
  
  
  
            deleteRemainingChildren(returnFiber, child.sibling);
  
  
  
  
            const existing = useFiber(child, element.props);
  
  
  
  
            existing.ref = coerceRef(returnFiber, child, element);
  
  
  
  
            existing.return = returnFiber;
  
  
  
  
            return existing;
  
  
  
  
          }
  
  
  
  
        
  
  
  
  
        // Didn't match.
  
  
  
  
        deleteRemainingChildren(returnFiber, child);
  
  
  
  
        break;
  
  
  
  
      } else {
  
  
  
  
        deleteChild(returnFiber, child);
  
  
  
  
      }
  
  
  
  
      // 遍歷兄弟節(jié)點(diǎn)，看能不能找到 key 相同的節(jié)點(diǎn)
  
  
  
  
      child = child.sibling;
  
  
  
  
    }
  
  
  
  

  
  
  
  
    if (element.type === REACT_FRAGMENT_TYPE) {
  
  
  
  
      const created = createFiberFromFragment(
  
  
  
  
        element.props.children,
  
  
  
  
        returnFiber.mode,
  
  
  
  
        lanes,
  
  
  
  
        element.key,
  
  
  
  
      );
  
  
  
  
      created.return = returnFiber;
  
  
  
  
      return created;
  
  
  
  
    } else {
  
  
  
  
      const created = createFiberFromElement(element, returnFiber.mode, lanes);
  
  
  
  
      created.ref = coerceRef(returnFiber, currentFirstChild, element);
  
  
  
  
      created.return = returnFiber;
  
  
  
  
      return created;
  
  
  
  
    }
  
  
  
  
  }
  
  
  
  
  
 
 
 
 

本著盡可能復(fù)用舊節(jié)點(diǎn)的原則，在單節(jié)點(diǎn) diff 在這里，我們會(huì)遍歷舊節(jié)點(diǎn)，對(duì)每個(gè)遍歷到的節(jié)點(diǎn)會(huì)做一下兩個(gè)判斷：

• key 是否相同
• key 相同的情況下，elementType 是否相同

延伸下來(lái)有三種情況：

• 如果 key 不相同，則直接調(diào)用 「deleteChild」 將這個(gè) child 標(biāo)記為刪除，但是我們不用灰心，可能只是我們還沒(méi)有找到那個(gè)對(duì)的節(jié)點(diǎn)，所以要繼續(xù)執(zhí)行child = child.sibling;遍歷兄弟節(jié)點(diǎn)，直到找到那個(gè)對(duì)的節(jié)點(diǎn)。
• 如果 key 相同，elementType 相同，那就是最理想的情況，找到了可以復(fù)用的節(jié)點(diǎn)，直接調(diào)用 「deleteRemainingChildren」 把剩余的兄弟節(jié)點(diǎn)標(biāo)記刪除，然后直接復(fù)用 child 返回。
• 如果 key 相同，但 elementType 不同，這是最悲情的情況，我們找到了那個(gè)節(jié)點(diǎn)，可惜的是這個(gè)節(jié)點(diǎn)的 elementType 已經(jīng)變了，那我們也不需要再找了，把 child 及其所有兄弟節(jié)點(diǎn)標(biāo)記刪除，跳出循環(huán)。直接創(chuàng)建一個(gè)新的節(jié)點(diǎn)。

多節(jié)點(diǎn)diff

 
 
 
 

  
  
  
  
function reconcileChildrenArray(
  
  
  
  
    returnFiber: Fiber,
  
  
  
  
    currentFirstChild: Fiber | null,
  
  
  
  
    newChildren: Array<*>,
  
  
  
  
    lanes: Lanes,
  
  
  
  
) {
  
  
  
  
    let resultingFirstChild: Fiber | null = null;
  
  
  
  
    let previousNewFiber: Fiber | null = null;
  
  
  
  

  
  
  
  
    let oldFiber = currentFirstChild;
  
  
  
  
    let lastPlacedIndex = 0;
  
  
  
  
    let newIdx = 0;
  
  
  
  
    let nextOldFiber = null;
  
  
  
  
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
  
  
  
  
        const newFiber = updateSlot(
  
  
  
  
        returnFiber,
  
  
  
  
        oldFiber,
  
  
  
  
        newChildren[newIdx],
  
  
  
  
        lanes,
  
  
  
  
        );
  
  
  
  
        if (newFiber === null) {
  
  
  
  
          break;
  
  
  
  
        }
  
  
  
  
          lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
  
  
  
  
          if (previousNewFiber === null) {
  
  
  
  
            resultingFirstChild = newFiber;
  
  
  
  
          } else {
  
  
  
  
            previousNewFiber.sibling = newFiber;
  
  
  
  
          }
  
  
  
  
          previousNewFiber = newFiber;
  
  
  
  
          oldFiber = nextOldFiber;
  
  
  
  
    }
  
  
  
  
    if (newIdx === newChildren.length) {
  
  
  
  
        ...
  
  
  
  
    }
  
  
  
  
    if (oldFiber === null) {
  
  
  
  
        ...
  
  
  
  
    }
  
  
  
  
    for (; newIdx < newChildren.length; newIdx++) {
  
  
  
  
        ...
  
  
  
  
    }
  
  
  
  
    return resultingFirstChild;
  
  
  
  
}
  
  
  
  

  
  
  
  

  
  
  
  
function updateSlot(
  
  
  
  
    returnFiber: Fiber,
  
  
  
  
    oldFiber: Fiber | null,
  
  
  
  
    newChild: any,
  
  
  
  
    lanes: Lanes,
  
  
  
  
  ): Fiber | null {
  
  
  
  
    const key = oldFiber !== null ? oldFiber.key : null;
  
  
  
  
    ...
  
  
  
  
    if (newChild.key === key) {
  
  
  
  
      return updateElement(returnFiber, oldFiber, newChild, lanes);
  
  
  
  
    } else {
  
  
  
  
      return null;
  
  
  
  
    }
  
  
  
  
}
 
 
 
 

從源碼我們可以看到，在 「reconcileChildrenArray」 中，出現(xiàn)了兩個(gè)循環(huán)。

第一輪循環(huán)中邏輯如下：

• 同時(shí)遍歷 oldFiber 鏈和 newChildren，判斷 oldFiber 和 newChild 的 key 是否相同。
• 如果 key 相同。
  • 判斷雙方 elementType 是否相同。
  • 如果相同則復(fù)用 oldFiber 返回。
  • 如果不同則新建 Fiber 返回。
• 如果 key 不同則直接跳出循環(huán)。

可以看到第一輪循環(huán)只要碰到新舊的 key 不一樣時(shí)就會(huì)跳出循環(huán)，換句話說(shuō)，第一輪循環(huán)里做的事情都是基于 key 相同，主要就是「更新」的工作。

跳出循環(huán)后，要先執(zhí)行兩個(gè)判斷：

• newChildren 已經(jīng)遍歷完了：這種情況說(shuō)明新的 children 全都已經(jīng)處理完了，只要把 oldFiber 和他所有剩余的兄弟節(jié)點(diǎn)刪除然后返回頭部的 Fiber 即可。
• 已經(jīng)沒(méi)有 oldFiber ：這種情況說(shuō)明 children 有新增的節(jié)點(diǎn)，給這些新增的節(jié)點(diǎn)逐一構(gòu)建 Fiber 并鏈接上，然后返回頭部的 Fiber 即可。

如果以上兩種情況都不是，則進(jìn)入第二輪循環(huán)。

在執(zhí)行第二輪循環(huán)之前，先把剩下的舊節(jié)點(diǎn)和他們對(duì)應(yīng)的 key 或者 index 做成映射，方便查找。

第二輪循環(huán)沿用了第一輪循環(huán)的 newIdx 變量，說(shuō)明第二輪循環(huán)是在第一輪循環(huán)結(jié)束的地方開(kāi)始再次遍歷剩下的 newChildren。

 
 
 
 

  
  
  
  
  const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
  
  
  
  
  for (; newIdx < newChildren.length; newIdx++) {
  
  
  
  
    const newFiber = updateFromMap(
  
  
  
  
      existingChildren,
  
  
  
  
      returnFiber,
  
  
  
  
      newIdx,
  
  
  
  
      newChildren[newIdx],
  
  
  
  
      lanes,
  
  
  
  
    );
  
  
  
  
    if (newFiber !== null) {
  
  
  
  
      if (shouldTrackSideEffects) {
  
  
  
  
        if (newFiber.alternate !== null) {
  
  
  
  
          existingChildren.delete(
  
  
  
  
            newFiber.key === null ? newIdx : newFiber.key,
  
  
  
  
          );
  
  
  
  
        }
  
  
  
  
      }
  
  
  
  
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
  
  
  
  
      if (previousNewFiber === null) {
  
  
  
  
        resultingFirstChild = newFiber;
  
  
  
  
      } else {
  
  
  
  
        previousNewFiber.sibling = newFiber;
  
  
  
  
      }
  
  
  
  
      previousNewFiber = newFiber;
  
  
  
  
    }
  
  
  
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  function placeChild(
  
  
  
  
  newFiber: Fiber,
  
  
  
  
  lastPlacedIndex: number,
  
  
  
  
  newIndex: number,
  
  
  
  
): number {
  
  
  
  
  newFiber.index = newIndex;
  
  
  
  
  if (!shouldTrackSideEffects) {
  
  
  
  
    // Noop.
  
  
  
  
    return lastPlacedIndex;
  
  
  
  
  }
  
  
  
  
  const current = newFiber.alternate;
  
  
  
  
  if (current !== null) {
  
  
  
  
    const oldIndex = current.index;
  
  
  
  
    if (oldIndex < lastPlacedIndex) {
  
  
  
  
      // This is a move.
  
  
  
  
      newFiber.flags |= Placement;
  
  
  
  
      return lastPlacedIndex;
  
  
  
  
    } else {
  
  
  
  
      // This item can stay in place.
  
  
  
  
      return oldIndex;
  
  
  
  
    }
  
  
  
  
  } else {
  
  
  
  
    // This is an insertion.
  
  
  
  
    newFiber.flags |= Placement;
  
  
  
  
    return lastPlacedIndex;
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

第二輪循環(huán)主要調(diào)用了 「updateFromMap」 來(lái)處理節(jié)點(diǎn)，在這里需要用 newChild 的 key 去 existingChildren 中找對(duì)應(yīng)的 Fiber。

• 能找到 key 相同的，則說(shuō)明這個(gè)節(jié)點(diǎn)只是位置變了，是可以復(fù)用的。
• 找不到 key 相同的，則說(shuō)明這個(gè)節(jié)點(diǎn)應(yīng)該是新增的。

不管是復(fù)用還是新增，「updateFromMap」 都會(huì)返回一個(gè) newFiber，然后我們需要為這個(gè) newFiber 更新一下它的位置(index)，但是僅僅更新這個(gè) Fiber 的 index 還不夠，因?yàn)檫@個(gè) Fiber 有可能是復(fù)用的，如果是復(fù)用的就意味著它已經(jīng)有對(duì)應(yīng)的真實(shí) DOM 節(jié)點(diǎn)了，我們還需要復(fù)用它的真實(shí) DOM，因此需要對(duì)應(yīng)更新這個(gè) Fiber 的 flag，但是真的需要對(duì)每個(gè) Fiber 都去設(shè)置 flag 嗎，我們舉個(gè)例子：

 
 
 
 

  
  
  
  
// 舊
  
  
  
  
[, , ]
  
  
  
  

  
  
  
  
// 新
  
  
  
  
[, , ]
 
 
 
 

如果按照我們剛剛說(shuō)的做法，這里的 a, b, c 都會(huì)被打上 flag，這樣一來(lái)，在 commit 階段，這三個(gè) DOM 都會(huì)被移動(dòng)，可是我們知道，這里顯然只需要移動(dòng)一個(gè)節(jié)點(diǎn)即可，退一萬(wàn)步說(shuō)我們移動(dòng)兩個(gè)節(jié)點(diǎn)也比移動(dòng)所有節(jié)點(diǎn)要來(lái)的聰明。

其實(shí)在這個(gè)問(wèn)題上主要就是我們得區(qū)分一下到底哪個(gè)節(jié)點(diǎn)才是移動(dòng)了的，這就需要一個(gè)參照點(diǎn)，我們要保證在參照點(diǎn)左邊都是已經(jīng)排好順序了的。而這個(gè)參照點(diǎn)就是 lastPlacedIndex。有了它，我們?cè)诒闅v newChildren 的時(shí)候可能會(huì)出現(xiàn)下面兩種情況：

• 生成(或復(fù)用)的 Fiber 對(duì)應(yīng)的老 index < lastPlacedIndex，這就說(shuō)明這個(gè) Fiber 的位置不對(duì)，因?yàn)?lastPlacedIndex 左邊的應(yīng)該全是已經(jīng)遍歷過(guò)的 newChild 生成的 Fiber。因此這個(gè) Fiber 是需要被移動(dòng)的，打上 flag。
• 如果 Fiber 對(duì)應(yīng)的老 index >= lastPlacedIndex，那就說(shuō)明這個(gè) Fiber 的相對(duì)位置是 ok 的，可以不用移動(dòng)，但是我們需要更新一下參照點(diǎn)，把參照點(diǎn)更新成這個(gè) Fiber 對(duì)應(yīng)的老 index。

我們舉一個(gè)例子：

       
 
 
 

        
  
  
  
// 舊
        
  
  
  
[, , , ]
        
  
  
  

        
  
  
  
// 新
        
  
  
  
[, , , , ]
       
 
 
 

lastPlacedIndex 初始值為 0，

首先處理
分享文章：一文讀懂React組件渲染核心原理
網(wǎng)址分享：http://m.5511xx.com/article/dpjoepc.html