fiber上的updateQueue经过React的一番核算之后，这个fiber现已有了新的状况，也便是state，关于类组件来说，state是在render函数里被运用的，已然现已得到了新的state，那么当务之急是履行一次render，得到持有新state的ReactElement。

假定render一次之后得到了很多的ReactElement，而这些ReactElement之中若只有少量需求更新的节点，那么明显不能悉数去更新它们，此刻就需求有一个diff进程来决议哪些节点是真实需求更新的。

源码结构

咱们以类组件为例，state的核算发生在类组件对应的fiber节点beginWork中的updateClassInstance函数中，在状况核算完毕之后，紧跟着便是去调finishClassComponent履行diff、打上effectTag（即新版本的flag）。

打上effectTag能够标识这个fiber发生了怎样的改变，例如：新增（Placement）、更新（Update）、删去（Deletion），这些被打上flag的fiber会在complete阶段被收集起来，形成一个effectList链表，只包括这些需求操作的fiber，最后在commit阶段被更新掉。

function updateClassComponent(
   current: Fiber | null, workInProgress: Fiber, Component: any, nextProps: any, renderLanes: Lanes,) {
   ...
   // 核算状况
   shouldUpdate = updateClassInstance(
     current,
     workInProgress,
     Component,
     nextProps,
     renderLanes,
   );
   ...
   // 履行render，进入diff，为fiber打上effectTag
   const nextUnitOfWork = finishClassComponent(
     current, 
     workInProgress,
     Component,
     shouldUpdate,
     hasContext,
     renderLanes,
     );
     return nextUnitOfWork;
 }

Diff的主体

关于Diff的参与者，在reconcileChildren函数的入参中能够看出

workInProgress.child = reconcileChildFibers(
 workInProgress,
 current.child,
 nextChildren,
 renderLanes,
 );

workInProgress：作为父节点传入，新生成的第一个fiber的return会被指向它。
current.child：旧fiber节点，diff生成新fiber节点时会用新生成的ReactElement和它作比较。
nextChildren：新生成的ReactElement，会以它为标准生成新的fiber节点。
renderLanes：本次的烘托优先级，终究会被挂载到新fiber的lanes特点上。
能够看出，diff的两个主体是：oldFiber（current.child）和newChildren（nextChildren，新的ReactElement），它们是两个不一样的数据结构。

比如现在有组件，它核算完新的状况之后，要根据这两个东西去做diff,分别是现有fiber树中（current树）对应fiber的一切子fiber节点和 的render函数的履行成果，即那些ReactElements。

对应fiber的一切子fiber节点：oldFiber

 current树中
 <Example/> fiber
     |
     |
     A --sibling---> B --sibling---> C

的render函数的履行成果，newChildren

 current fiber 对应的组件render的成果
 [
    {$$typeof: Symbol(react.element), type: "div", key: "A" },
    {$$typeof: Symbol(react.element), type: "div", key: "B" }, 
    {$$typeof: Symbol(react.element), type: "div", key: "B" },
 ]

Diff的根本原则

关于新旧两种结构来说，场景有节点本身更新、节点增删、节点移动三种状况。面临杂乱的状况，即使最前沿的算法，杂乱度也极高。面临这种状况，React以如下战略应对：

即使两个元素的子树彻底一样，但前后的父级元素不同，依照规则div元素及其子树会彻底销毁，并重建一个p元素及其子树，不会测验复用子树。

旧
<div>
 <span>a</span>
 <span>b</span>
</div>
新
<p>
 <span>a</span>
 <span>b</span>
</p>

运用tag（标签名）和 key辨认节点，区分出前后的节点是否改变，以达到尽量复用无改变的节点。

旧
<p key="a">aa</p>
<h1 key="b">bb</h1>
新
<h1 key="b">bb</h1>
<p key="a">aa</p>

由于tag 和 key的存在，所以React能够知道这两个节点仅仅方位发生了改变。

场景

上面提到diff算法应对三种场景：节点更新、节点增删、节点移动，但一个fiber的子元素有或许是单节点，也有或许是多节点。所以依据这两类节点能够再细分为：

单节点更新、单节点增删。
多节点更新、多节点增删、多节点移动。

什么是节点的更新呢？关于DOM节点来说，在前后的节点类型（tag）和key都相同的状况下，节点的特点发生了改变，是节点更新。若前后的节点tag或许key不相同，Diff算法会认为新节点和旧节点毫无关系。

以下比如中，key为b的新节点的className发生了改变，是节点更新。

旧
<div className={'a'} key={'a'}>aa</div>
<div className={'b'} key={'b'}>bb</div>
新
<div className={'a'} key={'a'}>aa</div>
<div className={'bcd'} key={'b'}>bb</div>

以下比如中，新节点的className虽然有改变，但key也改变了，不归于节点更新

旧
<div className={'a'} key={'a'}>aa</div>
<div className={'b'} key={'b'}>bb</div>
新
<div className={'a'} key={'a'}>aa</div>
<div className={'bcd'} key={'bbb'}>bb</div>

以下比如中，新节点的className虽然有改变，但tag也改变了，不归于节点更新

旧
<div className={'a'} key={'a'}>aa</div>
<div className={'b'} key={'b'}>bb</div>
新
<div className={'a'} key={'a'}>aa</div>
<p className={'bcd'} key={'b'}>bb</p>

下面来分开叙说一下单节点和多节点它们各自的更新战略。

单节点

若组件产出的元素是如下的类型：

<div key="a">aa</div>

那么它终究产出的ReactElement为下面这样（省掉了一些与diff相关度不大的特点）

{
   $$typeof: Symbol(react.element), type: "div", key: "a" 
   ...
}

单节点指newChildren为单一节点，但是oldFiber的数量不一定，所以实践有如下三种场景：

为了下降理解本钱，咱们用简化的节点模型来阐明问题，字母代表key。

单个旧节点

旧： A
新： A

多个旧节点

旧： A - B - C
新： B

没有旧节点

旧： --
新： A

关于单节点的diff，其实就只有更新操作，不会涉及位移和方位的改变，单节点的更新会调用reconcileSingleElement函数处理。该函数中对以上三种场景都做了覆盖。但实践上面的状况关于React来说仅仅两种，oldFiber链是否为空。因而，在完成上也只处理了这两种状况。

oldFiber链不为空

遍历它们，找到key相同的节点，然后删去剩余的oldFiber节点，再用匹配的oldFiber，newChildren中新节点的props来生成新的fiber节点。

   function reconcileSingleElement(
     returnFiber: Fiber,     currentFirstChild: Fiber | null,     element: ReactElement,     lanes: Lanes   ): Fiber {
     const key = element.key;
     let child = currentFirstChild;
     while (child !== null) {
        if (child.key === key) {
          switch (child.tag) {
            case Fragment:
            ...
            case Block:
            ...
            default: {
              if (child.elementType === element.type) {
                 // 先删去剩余的oldFiber节点
                deleteRemainingChildren(returnFiber, child.sibling);
                // 根据oldFiber节点和新节点的props新建新的fiber节点
                const existing = useFiber(child, element.props);
                existing.ref = coerceRef(returnFiber, child, element);
                existing.return = returnFiber; return existing;
              }
              break;
            }
         }
        deleteRemainingChildren(returnFiber, child);
        break;
      } else {
        // 没匹配到阐明新的fiber节点无法从oldFiber节点新建
        // 删去掉一切oldFiber节点
        deleteChild(returnFiber, child);
     }
     child = child.sibling;
   }
 ...
 }

oldFiber链为空

关于没有oldFiber节点的状况，只能新建newFiber节点。逻辑不杂乱。

   function reconcileSingleElement(
     returnFiber: Fiber,     currentFirstChild: Fiber | null,     element: ReactElement,     lanes: Lanes   ): Fiber {
     const key = element.key;
     let child = currentFirstChild;
     while (child !== null) {
        // oldFiber链非空的处理
        ...
     } if (element.type === REACT_FRAGMENT_TYPE) {
        // 处理Fragment类型的节点
        ... 
     } else {
        // 用产生的ReactElement新建一个fiber节点
        const created = createFiberFromElement(element, returnFiber.mode, lanes);
        created.ref = coerceRef(returnFiber, currentFirstChild, element);
        created.return = returnFiber;
        return created;
     }
   }

单节点的更新便是这样的处理，真实比较杂乱的状况是多节点的diff。由于它涉及到节点的增删和位移。

多节点

若组件终究产出的DOM元素是如下这样：

<div key="a">aa</div>
<div key="b">bb</div>
<div key="c">cc</div>
<div key="d">dd</div>

那么终究的newChildren为下面这样（省掉了一些与diff相关度不大的特点）

[
 {$$typeof: Symbol(react.element), type: "div", key: "a" },
 {$$typeof: Symbol(react.element), type: "div", key: "b" },
 {$$typeof: Symbol(react.element), type: "div", key: "c" },
 {$$typeof: Symbol(react.element), type: "div", key: "d" }
]

多节点的改变有以下四种或许性。

节点更新

旧： A - B - C
新： `A - B - C`

新增节点

旧： A - B - C
新： A - B - C - `D - E`

删去节点

旧： A - B - C - `D - E`
新： A - B - C

节点移动

旧： A - B - C - D - E
新： A - B - `D - C - E`

多节点的状况一定是归于这四种状况的任意组合，这种状况会调用reconcileChildrenArray进行diff。依照以上四种状况，它会以newChildren为主体进行最多三轮遍历，但这三轮遍历并不是相互独立的，事实上只有第一轮是从头开始的，之后的每一轮都是上轮完毕的断点持续。实践上在平时的实践中，节点本身的更新是最多的，所以Diff算法会优先处理更新的节点。因而四轮遍历又能够依照场景分为两部分：

第一轮是针对节点本身特点更新，剩余的两轮顺次处理节点的新增、移动，而重点又在移动节点的处理上，所以本文会着重解说节点更新和节点移动的处理，对删去和新增简单带过。

节点更新

第一轮从头开始遍历newChildren，会逐个与oldFiber链中的节点进行比较，判别节点的key或许tag是否有改变。

没变则从oldFiber节点clone一个props被更新的fiber节点，新的props来自newChildren中的新节点，这样就完成了节点更新。
有改变阐明不满足复用条件，当即中止遍历进入下边的遍历。Diff算法的杂乱度也由于这个操作大幅下降。

let newIdx = 0;
for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
   ...
   // 更新节点，关于DOM节点来说，updateSlot内部会判别
   // key 和 tag。任意一个不同，则回来null
   const newFiber = updateSlot( returnFiber,
     oldFiber,
     newChildren[newIdx],
     lanes,
   );
   // newFiber为null则阐明当时的节点不是更新的场景，间断这一轮循环
   if (newFiber === null) {
     if (oldFiber === null) {
        oldFiber = nextOldFiber;
     }
     break;
   }
    ...
 }

咱们来看一个比如，假定新旧的节点如下：

旧： A – B – C - D – E
新： A – B – D - C

在本轮遍历中，会遍历A - B - D - C。A和B都是key没变的节点，能够直接复用，但当遍历到D时，发现key改变了，跳出当时遍历。比如中A 和 B是本身发生更新的节点，后边的D 和 C咱们看到它的方位相关于oldFiber链发生了改变，会往下走到处理移动节点的循环中。

关于移动节点的参照物

为了方便阐明，把保留在原位的节点称为固定节点。经过这次循环的处理，能够看出固定节点是A 和 B。在newChildren中，最靠右的固定节点的方位至关重要，关于后续的移动节点的处理来说，它的意义是供给参考方位。所以，每当处理到最后一个固定节点时，要记住此刻它的方位，这个方位便是lastPlacedIndex。关键代码如下：

let newIdx = 0;
for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
 ...
 // 跳出逻辑
 ...
 // 如果不跳出，记载最新的固定节点的方位
 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
 ...}

placeChild办法实践上是移动节点的办法，但当节点无需移动的时分，会回来当时节点的方位，关于固定节点来说，由于无需移动，所以回来的便是固定节点的index。

节点删去

咱们没有提到对删去节点的处理，实践上删去节点比较简单。

旧： A – B – C – D - E 新： A – B – C

由于遍历的是newChildren，当它遍历完毕，但oldFiber链还没有遍历完，那么阐明剩余的节点都要被删去。直接在oldFiber节点上标记Deletion的effectTag来完成删去。

if (newIdx === newChildren.length) {
   // 新子节点遍历完，阐明剩余的oldFiber都是没用的了，能够删去
   deleteRemainingChildren(returnFiber, oldFiber);
   return resultingFirstChild;
}

deleteRemainingChildren调用了deleteChild，值得注意的是，删去不仅仅是标记了effectTag为Deletion，还会将这个被删去的fiber节点添加到父级的effectList中。

function deleteChild(returnFiber: Fiber, childToDelete: Fiber): void {
   ...
   const last = returnFiber.lastEffect;
   // 将要删去的child添加到父级fiber的effectList中，并添加上effectTag为删去
   if (last !== null) {
     last.nextEffect = childToDelete;
     returnFiber.lastEffect = childToDelete;
   } else {
     returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
   }
   childToDelete.nextEffect = null;
   childToDelete.effectTag = Deletion;
}

节点新增

新增节点的场景也很好理解，当oldFiber链遍历完，但newChildren还没遍历完，那么余下的节点都归于新插入的节点，会新建fiber节点并以sibling为指针连成fiber链。

旧： A – B – C

新： A – B – C – D - E

插入的逻辑（省掉了相关度不高的代码）

if (oldFiber === null) {
 // 旧的遍历完了，意味着剩余的都是新增的了
 for (; newIdx < newChildren.length; newIdx++) { // 首要创立newFiber
    const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
    ...
    // 再将newFiber连接成以sibling为指针的单向链表
    if (previousNewFiber === null) {
        resultingFirstChild = newFiber;
    } else {
        previousNewFiber.sibling = newFiber;
    }
    previousNewFiber = newFiber;
  }
  return resultingFirstChild;
}

节点移动

节点的移动是如下场景：

旧 A – B – C - D - E - F

新 A – B – D - C - E

经过第一轮遍历的处理，固定节点为A B，最新的固定节点的方位（lastPlacedIndex）为1（B的方位）。此刻oldFiber链中还剩C – D – E – F，newChildren中还剩D – C – E。

接下来的逻辑关于方位不一样的节点，它自己会先更新再移动。由于此刻剩余的节点方位变了，更新又要复用oldFiber节点，所以为了在更新时方便查找，会将剩余的oldFiber节点放入一个以key为键，值为oldFiber节点的map中。称为existingChildren。

由于newChildren 和 oldFiber节点都没遍历完，阐明需求移动方位。此刻需求清晰一点，便是这些节点都在最新的固定节点的右边。

移动的逻辑是：newChildren中剩余的节点，都是不确认要不要移动的，遍历它们，每一个都去看看这个节点在oldFiber链中的方位（旧方位），遍历到的节点有它在newChildren中的方位（新方位）：

如果旧方位在lastPlacedIndex的右边，阐明这个节点方位不变。

原因是旧方位在lastPlacedIndex的右边，而新节点的方位也在它的右边，所以它的方位没改变。由于方位不变，所以它成了固定节点，把lastPlacedIndex更新成新方位。

如果旧方位在lastPlacedIndex的左边，当时这个节点的方位要往右挪。

原因是旧方位在lastPlacedIndex的左边，新方位却在lastPlacedIndex的右边，所以它要往右挪，但它不是固定节点。此刻无需更新lastPlacedIndex。

咱们来用上边的比如过一下这部分逻辑。

旧 A – B – C - D - E - F 新 A – B – D - C - E

方位固定部分 A – B，最右侧的固定节点为B，lastPlacedIndex为1。这时剩余oldFiber链为C – D – E – F，existingChildren为

{
   C: '节点C',
   D: '节点D',
   E: '节点E',
   F: '节点F'
}

newChildren的剩余部分D – C – E持续遍历。

首要遍历到D，D在oldFiber链中（A – B – C – D – E）的方位为3

3 > 1，oldFiber中D的方位在B的右边，newChildren中也是如此，所以D的方位不动，此刻最新的固定节点变成了D，更新lastPlacedIndex为3。并从existingChildren中删去D，

{
   C: '节点C',
   E: '节点E',
   F: '节点F'
}

再遍历到C，C在oldFiber链中（A – B – C – D – E）的索引为2

2 < 3，C本来在最新固定节点（D）的左边，newChildren中C在D的右边，所以要给它移动到右边。并从existingChildren中删去C。

{
   E: '节点E',
   F: '节点F'
}

再遍历到E，E在oldFiber链中（A – B – C – D – E）的方位为4

4 > 3，oldFiber链中E方位在D的方位的右边，新方位中也是如此，所以E的方位不动，此刻最新的固定节点变成了E，更新lastPlacedIndex为4。并从existingChildren中删去E，

{
   F: '节点F'
}

这个时分newChildren都处理完了，针对移动节点的遍历完毕。此刻还剩一个F节点，是在oldFiber链中的，由于newChildren都处理完了，所以将它删去即可。

existingChildren.forEach(child => deleteChild(returnFiber, child));

能够看到，节点的移动是以最右侧的固定节点方位作为参照的。这些固定节点是指方位未发生改变的节点。每次对比节点是否需求移动之后，及时更新固定节点非常重要。

源码

了解了上边的多节点diff原理后，将上边的关键点匹配到源码上更方便能进一步理解。下面放出带有具体注释的源码。

 function reconcileChildrenArray(
    returnFiber: Fiber,    currentFirstChild: Fiber | null,    newChildren: Array<*>,    lanes: Lanes,
): Fiber | null {
    /* * returnFiber：currentFirstChild的父级fiber节点       * currentFirstChild：当时履行更新使命的WIP（fiber）节点       * newChildren：组件的render办法烘托出的新的ReactElement节点       * lanes：优先级相关    * */
    // resultingFirstChild是diff之后的新fiber链表的第一个fiber。
    let resultingFirstChild: Fiber | null = null;
    // resultingFirstChild是新链表的第一个fiber。
    // previousNewFiber用来将后续的新fiber接到第一个fiber之后
    let previousNewFiber: Fiber | null = null;
    // oldFiber节点，新的child节点会和它进行比较
    let oldFiber = currentFirstChild;
    // 存储固定节点的方位
    let lastPlacedIndex = 0;
    // 存储遍历到的新节点的索引
    let newIdx = 0;
    // 记载目前遍历到的oldFiber的下一个节点
    let nextOldFiber = null;
    // 该轮遍历来处理节点更新，依据节点是否可复用来决议是否中止遍历
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
        // newChildren遍历完了，oldFiber链没有遍历完，此刻需求中止遍历
        if (oldFiber.index > newIdx) {
            nextOldFiber = oldFiber; oldFiber = null;
        } else {
            // 用nextOldFiber存储当时遍历到的oldFiber的下一个节点
            nextOldFiber = oldFiber.sibling;
        }
        // 生成新的节点，判别key与tag是否相同就在updateSlot中
        // 对DOM类型的元素来说，key 和 tag都相同才会复用oldFiber
        // 并回来出去，否则回来null
        const newFiber = updateSlot(
            returnFiber,
            oldFiber,
            newChildren[newIdx],
            lanes,
        );
        // newFiber为 null阐明 key 或 tag 不同，节点不可复用，中止遍历
        if (newFiber === null) {
            if (oldFiber === null) {
            // oldFiber 为null阐明oldFiber此刻也遍历完了
            // 是以下场景，D为新增节点
            // 旧 A - B - C 
            // 新 A - B - C - D oldFiber = nextOldFiber;
            }
            break;
        }
        if (shouldTrackSideEffects) {
            // shouldTrackSideEffects 为true表示是更新进程
            if (oldFiber && newFiber.alternate === null) {
                // newFiber.alternate 等同于 oldFiber.alternate 
                // oldFiber为WIP节点，它的alternate 便是 current节点
                // oldFiber存在，而且经过更新后的新fiber节点它还没有current节点,
                // 阐明更新后展现在屏幕上不会有current节点，而更新后WIP
                // 节点会称为current节点，所以需求删去已有的WIP节点
                deleteChild(returnFiber, oldFiber);
                }
            }
            // 记载固定节点的方位
            lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
            // 将新fiber连接成以sibling为指针的单向链表
            if (previousNewFiber === null) {
                resultingFirstChild = newFiber;
            } else {
                previousNewFiber.sibling = newFiber;
            }
            previousNewFiber = newFiber;
            // 将oldFiber节点指向下一个，与newChildren的遍历同步移动
            oldFiber = nextOldFiber;
         }
        // 处理节点删去。新子节点遍历完，阐明剩余的oldFiber都是没用的了，能够删去.
        if (newIdx === newChildren.length) {
            // newChildren遍历完毕，删去掉oldFiber链中的剩余的节点
            deleteRemainingChildren(returnFiber, oldFiber);
            return resultingFirstChild;
        }
        // 处理新增节点。旧的遍历完了，能复用的都复用了，所以意味着新的都是新插入的了
        if (oldFiber === null) {
            for (; newIdx < newChildren.length; newIdx++) {
                // 根据新生成的ReactElement创立新的Fiber节点
                const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
                if (newFiber === null) {
                    continue;
                }
                // 记载固定节点的方位lastPlacedIndex
                lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx); 
                // 将新生成的fiber节点连接成以sibling为指针的单向链表
                if (previousNewFiber === null) {
                    resultingFirstChild = newFiber;
                } else {
                    previousNewFiber.sibling = newFiber; 
                }
                previousNewFiber = newFiber;
            }
            return resultingFirstChild;
        }
        // 履行到这是都没遍历完的状况，把剩余的旧子节点放入一个以key为键,值为oldFiber节点的map中
        // 这样在根据oldFiber节点新建新的fiber节点时，能够经过key快速地找出oldFiber
        const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
        // 节点移动
        for (; newIdx < newChildren.length; newIdx++) {
            // 根据map中的oldFiber节点来创立新fiber
            const newFiber = updateFromMap( existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes, ); 
            if (newFiber !== null) {
                if (shouldTrackSideEffects) {
                    if (newFiber.alternate !== null) {
                        // 由于newChildren中剩余的节点有或许和oldFiber节点一样,仅仅方位换了，
                        // 但也有或许是是新增的.
                        // 如果newFiber的alternate不为空，则阐明newFiber不是新增的。
                        // 也就阐明着它是根据map中的oldFiber节点新建的,意味着oldFiber现已被运用了,所以需
                        // 要从map中删去oldFiber
                        existingChildren.delete(
                            newFiber.key === null ? newIdx : newFiber.key,
                        );
                     }
                  }
                 // 移动节点，多节点diff的中心，这里真实会完成节点的移动
                 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
                 // 将新fiber连接成以sibling为指针的单向链表
                if (previousNewFiber === null) {
                    resultingFirstChild = newFiber;
                } else {
                    previousNewFiber.sibling = newFiber; 
                }
                previousNewFiber = newFiber;
            }
         }
        if (shouldTrackSideEffects) {
           // 此刻newChildren遍历完了，该移动的都移动了，那么删去剩余的oldFiber
           existingChildren.forEach(child => deleteChild(returnFiber, child));
        }
        return resultingFirstChild;
 }

总结

Diff算法经过key和tag来对节点进行取舍，可直接将杂乱的比对拦截掉，然后降级成节点的移动和增删这样比较简单的操作。对oldFiber和新的ReactElement节点的比对，将会生成新的fiber节点，同时标记上effectTag，这些fiber会被连到workInProgress树中，作为新的WIP节点。树的结构因而被一点点地确认，而新的workInProgress节点也根本定型。这意味着，在diff过后，workInProgress节点的beginWork节点就完成了。接下来会进入completeWork阶段。

深入React Diff算法

源码结构

相关参考视频解说：进入学习

Diff的主体

Diff的根本原则

场景

单节点

oldFiber链不为空

oldFiber链为空

多节点

节点更新

节点删去

节点新增

节点移动

源码

总结

作者信息

深入React Diff算法

源码结构

相关参考视频解说：进入学习

Diff的主体

Diff的根本原则

场景

单节点

oldFiber链不为空

oldFiber链为空

多节点

节点更新

节点删去

节点新增

节点移动

源码

总结

相关文章

webpack打包优化

写点 SwiftUI: 不要再用 Gesture.onEnded(_:) 啦！

如何提高设计还原度？做好这5个方面就够了！

算法小白看这里就对了

作者信息