React源码分析7-state计算流程和优先级

setState执行之后会发生什么

setState 执行之后，会执行一个叫 enqueueSetState 的方法，这个主要作用是创建 Update 对象和发起调度，可以看下这个函数的逻辑

enqueueSetState: function (inst, payload, callback) {
    // 1. inst是组件实例，从组件实例中拿到当前组件的Fiber节点
    var fiber = get(inst);
    var eventTime = requestEventTime();
    var lane = requestUpdateLane(fiber);
    // 2.1 根据更新发起时间、优先级、更新的payload创建一个update对象
    var update = createUpdate(eventTime, lane);
    update.payload = payload;

    // 2.2 如果 setState 有回调，顺便把回调赋值给 update 对象的 callback 属性
    if (callback !== undefined && callback !== null) {
      update.callback = callback;
    }

    // 3. 将 update 对象关联到 Fiber 节点的 updateQueue 属性中
    enqueueUpdate(fiber, update);
    // 4. 发起调度
    var root = scheduleUpdateOnFiber(fiber, lane, eventTime);
}

从上面源码可以清晰知道，setState 调用之后做的4件事情

  1. 根据组件实例获取其 Fiber 节点
  2. 创建 Update 对象
  3. 将 Update 对象关联到 Fiber 节点的 updateQueue 属性中
  4. 发起调度

根据组件实例获取其 Fiber 节点

其实就是拿组件实例中的 _reactInternals 属性，这个就是当前组件所对应的 Fiber 节点

function get(key) {
  return key._reactInternals;
}

题外话：react利用双缓存机制来完成 Fiber 树的构建和替换，也就是 current 和 workInProgress 两棵树，那 enqueueSetState 里面拿的是那棵树下的 Fiber 节点呢？

答案是：current树下的Fiber节点。具体的原理在下面update对象丢失问题再说明

创建update对象

function createUpdate(eventTime, lane) {
  var update = {
    eventTime: eventTime,
    lane: lane,
    tag: UpdateState,
    payload: null,
    callback: null,
    next: null
  };
  return update;
}

属性的含义如下：

  • eventTime：update对象创建的时间，用于ensureRootIsScheduled计算过期时间用
  • lane：此次更新的优先级
  • payload：setState的第一个参数
  • callback：setState的第二个参数
  • next：连接的下一个 update 对象

将Update对象关联到Fiber节点的updateQueue属性

这里执行的是 enqueueUpdate 函数，下面是我简化过后的逻辑

function enqueueUpdate(fiber, update) {
    var updateQueue = fiber.updateQueue;
    var sharedQueue = updateQueue.shared;
    var pending = sharedQueue.pending;

    if (pending === null) {
      update.next = update;
    } else {
      update.next = pending.next;
      pending.next = update;
    }
    sharedQueue.pending = update;
}

可以看到这里的逻辑主要是将 update 对象放到 fiber 对象的 updateQueue.shared.pending 属性中， updateQueue.shared.pending 是一个环状链表。

那为什么需要把它设计为一个环状链表？我是这样理解的

  1. shared.pending 存放的是链表的最后一个节点，那么在环状链表中，链表的最后一个节点的next指针，是指向环状链表的头部节点，这样我们就能快速知道链表的首尾节点
  2. 当知道首尾节点后，就能很轻松的合并两个链表。比如有两条链表a、b，我们想要把 b append到 a 的后面，可以这样做
const lastBPoint = bTail
const firstBPoint = bTail.next
lastBPoint.next = null
aTail.next = firstBPoint
aTail = lastBPoint

后面即使有c、d链表，同样也可以用相同的办法合并到a。react 在构建 updateQueue 链表上也用了类似的手法，新产生的 update 对象通过类似上面的操作合并到 updateQueue 链表，相关参考视频讲解：进入学习

发起调度

在 enqueueUpdate 末尾，执行了 scheduleUpdateOnFiber 函数，该方法最终会调用 ensureRootIsScheduled 函数来调度react的应用根节点。

当进入 performConcurrentWorkOnRoot 函数时，就代表进入了 reconcile 阶段，也就是我们说的 render 阶段。render 阶段是一个自顶向下再自底向上的过程，从react的应用根节点开始一直向下遍历，再从底部节点往上回归，这就是render阶段的节点遍历过程。

这里我们需要知道的是，在render阶段自顶向下遍历的过程中，如果遇到组件类型的Fiber节点，我们会执行 processUpdateQueue 函数，这个函数主要负责的是组件更新时 state 的计算

processUpdateQueue做了什么

processUpdateQueue函数主要做了三件事情

  1. 构造本轮更新的 updateQueue，并缓存到 currentFiber 节点中
  2. 循环遍历 updateQueue，计算得到 newState，构造下轮更新的 updateQueue
  3. 更新 workInProgress 节点中的 updateQueue、memoizedState 属性

这里的 updateQueue 并不指代源码中 Fiber 节点的 updateQueue，可以理解为从 firstBaseUpdate 到 lastBaseUpdate 的整条更新队列。这里为了方便描述和理解，直接用 updateQueue 替代说明。

变量解释

因为涉及的变量比较多，processUpdateQueue 函数的逻辑看起来并不怎么清晰，所以我先列出一些变量的解释方便理解

  • shared.pending：

    • enqueueSetState 产生的 update对象 环形链表

  • first/lastBaseUpdate：-- 下面我会用 baseUpdate 代替

    • 当前 Fiber 节点中 updateQueue 对象中的属性，代表当前组件整个更新队列链表的首尾节点

  • first/lastPendingUpdate：下面我会用 pendingUpdate 代替

    • shared.pending 剪开后的产物，分别代表新产生的 update对象 链表的首尾节点，最终会合并到 currentFiber 和 workInProgress 两棵树的更新队列尾部

  • newFirst/LastBaseUpdate：下面我会用 newBaseUpdate 代替

    • newState计算过程会得到，只要存在低优先级的 update 对象，这两个变量就会有值。这两个变量会赋值给 workInProgress 的 baseUpdate，作为下一轮更新 update对象 链表的首尾节点
  • baseState：newState 计算过程依赖的初始 state
  • memoizedState：当前组件实例的 state，processUpdateQueue 末尾会将 newState 赋值给这个变量

构造本轮更新的 updateQueue

上面我们说到 shared.pending 是enqueueSetState 产生的 update对象 环形链表，在这里我们需要剪断这个环形列表取得其中的首尾节点，去组建我们的更新队列。那如何剪断呢？

shared.pending 是环形链表的尾部节点，它的下一个节点就是环形链表的头部节点，参考上一小节我们提到的链表合并操作。

var lastPendingUpdate = shared.pending;
var firstPendingUpdate = lastPendingUpdate.next;
lastPendingUpdate.next = null;

这样就能剪断环形链表，拿到我们想要的新的 update 对象 —— pendingUpdate。接着我们要拿着这个 pendingUpdate 做两件事情：

  1. 将 pendingUpdate 合并到当前Fiber节点的更新队列
  2. 将 pendingUpdate 合并到 currentFiber树 中对应 Fiber节点 的更新队列

为什么要做这两件事情？

  1. 第一个是解决状态连续性问题，当出现多个 setState 更新时，我们要确保当前 update对象 的更新是以前一个 update对象 计算出来的 state 为前提。所以我们需要构造一个更新队列，新的 update对象 要合并到更新队列的尾部，从而维护state计算的连续性
  2. 第二个是解决 update 对象丢失问题。在 shared.pending 被剪开之后，shared.pending会被赋值为null，当有高优先级任务进来时，低优先级任务就会被打断，也就意味着 workInProgress 树会被还原，shared.pending 剪开之后得到的 pendingUpdate 就会丢失。这时就需要将 pendingUpdate 合并到 currentFiber树 的更新队列中

接下来可以大致看一下这一部分的源码

  var queue = workInProgress.updateQueue;
  var firstBaseUpdate = queue.firstBaseUpdate;
  var lastBaseUpdate = queue.lastBaseUpdate;

  // 1. 先拿到本次更新的 update对象 环形链表
  var pendingQueue = queue.shared.pending;

  if (pendingQueue !== null) {
    // 2. 清空pending
    queue.shared.pending = null;

    var lastPendingUpdate = pendingQueue;
    var firstPendingUpdate = lastPendingUpdate.next;
    // 3. 剪开环形链表
    lastPendingUpdate.next = null;

    // 4. 将 pendingupdate 合并到 baseUpdate
    if (lastBaseUpdate === null) {
      firstBaseUpdate = firstPendingUpdate;
    } else {
      lastBaseUpdate.next = firstPendingUpdate;
    }
    lastBaseUpdate = lastPendingUpdate;

    // 5. 将 pendingupdate 合并到 currentFiber树的 baseUpdate
    var current = workInProgress.alternate;
    if (current !== null) {
      var currentQueue = current.updateQueue;
      var currentLastBaseUpdate = currentQueue.lastBaseUpdate;

      if (currentLastBaseUpdate !== lastBaseUpdate) {
        if (currentLastBaseUpdate === null) {
          currentQueue.firstBaseUpdate = firstPendingUpdate;
        } else {
          currentLastBaseUpdate.next = firstPendingUpdate;
        }

        currentQueue.lastBaseUpdate = lastPendingUpdate;
      }
    }
  }

源码看起来很多，但本质上只做了一件事，从源码中可以看出这部分主要就是把 shared.pending 剪开，拿到我们的 pendingUpdate，再把 pendingUpdate 合并到本轮更新和 currentFiber 节点的 baseUpdate 中。

计算 newState

在这部分的源码中，除了计算 newState，还有另外一个重要工作是，构造下一轮更新用的 updateQueue。

到这里可能会有疑问，为什么需要构造下轮更新的 updateQueue，本轮更新我们把 shared.pending 里面的对象遍历计算完，再把 state 更新，下轮更新进来再根据这个 state 计算不行好了吗？

如果没有高优先级任务打断机制，确实是不需要在这里构造下轮更新的 updateQueue，因为每轮更新我们只会依赖当前的 state 和 shared.pending。

打断机制下，低优先级任务重启后的执行，需要依赖完整的更新队列才能保证 state 的连续性和正确性。下面我举个例子

state = { count: 0 }
componentDidMount() {
    const button = this.buttonRef.current
    // 低优先级任务
    setTimeout(() => this.setState({ count: 1 }), 1000)
    // 高优先级任务
    setTimeout(() => button.click(), 1040)
}
handleButtonClick = () => {
    this.setState( prevState => {
      return { count: prevState.count + 2 }
    } )
}

我们期望能实现的效果是 0 -> 2 -> 3，需求如下：

  1. 高优先级任务打断低优先级任务之后，不以低优先级任务计算得到的baseState做计算
  2. 低优先级任务重启后，不能覆盖高优先级任务计算得到的值，且需要根据低优先级任务计算得到的newState，作为高优先级的baseState再去执行一次高优先级任务

知道了需求，我们可以大概列一下实现思路：

  1. 低优先级任务打断后，高优先级任务执行之前，需要还原到低优先级任务执行之前的 workInPregress 节点，确保不受低优先级任务计算得到的 baseState 影响
  2. 需要维护一个更新对象队列，按执行顺序存储 update 对象，确保低优先级重启后，依然会执行高优先级任务

上面说的需求和实现思路在 react 的源码中实现其实是非常简单的，但要理解其中的含义可能需要费点功夫，下面可以看看我改动过后的源码，可以直接从 do...while 开始看

  function cloneUpdate(update) {
      return {
          eventTime: update.eventTime,
          lane: update.lane,
          tag: update.tag,
          payload: update.payload,
          callback: update.callback,
          next: null
      };
  }
  if (firstBaseUpdate !== null) {
    var newState = queue.baseState;

    var newBaseState = null;
    var newFirstBaseUpdate = null;
    var newLastBaseUpdate = null;
    var update = firstBaseUpdate;

    // 遍历 updateQueue
    do {
      var updateLane = update.lane;
      var updateEventTime = update.eventTime;

      // 校验当前 update 对象够不够优先级
      if (!isSubsetOfLanes(renderLanes, updateLane)) {
        // 优先级不够，我们需要从当前 update 对象开始重新构造一个更新队列
        var clone = cloneUpdate(update)

        if (newLastBaseUpdate === null) {
          newFirstBaseUpdate = newLastBaseUpdate = clone;
          // 当前的 newState 就作为下轮更新的 baseState 使用
          newBaseState = newState;
        } else {
          newLastBaseUpdate = newLastBaseUpdate.next = clone;
        }
      } else {
        // 优先级够
        if (newLastBaseUpdate !== null) {
          // newLastBaseUpdate 不为空，就代表存在优先级不够的 update 对象
          var _clone = cloneUpdate(update)
          // 为保证状态连续性，即使当前 update 对象优先级足够，也要被放到 updateQueue 中
          newLastBaseUpdate = newLastBaseUpdate.next = _clone;
        }
        // 计算newState
        newState = getStateFromUpdate(workInProgress, queue, update, newState, props, instance);
      }

      update = update.next;
    } while (update);

逻辑如下：

  • 优先级不够

    • 重新构造更新队列 newBaseUpdate，留到低优先级任务重启遍历
    • 记录当前 newState，留到低优先级任务重启作为 baseState 计算

  • 优先级足够

    • 看看 newBaseUpdate 有没有东西，有东西就把当前 update 对象也合并进去
    • 计算 newState

这里 newState 的计算逻辑很简单

  • payload是值。用对象包裹合并到 prevState 即可
  • payload是函数。传入 prevState 计算，将函数返回值也合并到 prevState 即可

更新 workInProgress 节点

更新 workInProgress 节点属性的逻辑不多，主要就是把 newBaseState、newBaseUpate 赋值给 workInProgress 节点，作为下一轮更新的 baseState 和更新队列使用

if (newLastBaseUpdate === null) {
  newBaseState = newState;
}

queue.baseState = newBaseState;
queue.firstBaseUpdate = newFirstBaseUpdate;
queue.lastBaseUpdate = newLastBaseUpdate;
workInProgress.memoizedState = newState;
  1. 如果 newLastBaseUpdate 为空，代表所有 update 对象为空，本轮更新计算得到的 newState 可以完全作为下轮更新的 baseState 使用。否则只能用出现首个不够优先级的 update 对象时缓存下来的 newState 作为下轮更新的 baseState
  2. 更新 baseUpdate，当所有 update 对象优先级足够，baseUpdate 的值一般为空。只有存在优先级不够的 update 对象时，才会有值
  3. 将 newState 赋值给 memoizedState， memoizedState 代表当前组件的所有 state

总结

看到上面的原理解析是不是很复杂，我们可以忽略所有的实现细节，回归现象本质，state计算就是遍历 update对象 链表根据 payload 得到新的state。在此前提下，因为优先级机制，打断之后会还原 workInProgress 节点，从而会引起 update对象 丢失问题 和 state计算连续性问题。解决这两个问题才是我们上面说的复杂的实现细节

update对象丢失问题

为什么会丢失

我们知道高优先级任务进来会打断低优先级任务的执行，打断之后会将当前的 workInProgress 节点还原为开始的状态，也就是可以理解为会将 workInProgress 树还原为当前页面所渲染的 currentFiber 节点。当 workInProgress 节点还原之后，我们本来存在 workInProgress 中的 updateQueue 属性也会被重置，那就意味着低优先级的 update 对象会丢失。

上面说到的，setState产生的新 update对象 是会放在 currentFiber 节点上也是这个原因，如果 setState 产生的新 update对象 放到 workInProgress 上，只要 workInProgress 被还原，这些 update对象 就会丢失

如何解决

我们在 processUpdateQueue 函数的开始阶段，将新产生的 update 对象，也就是 shared.pending 中的值，合并到 currentFiber( workInProgress.alternate ) 节点的 firstBaseUpdate 和 lastBaseUpdate。具体规则如下

  1. currentFiber 节点不存在 lastBaseUpdate，将新的 update 对象赋值给 currentFiber 节点的 firstBaseUpdate 和 lastBaseUpdate 属性
  2. currentFiber 节点存在 lastBaseUpdate，将新的 update 对象拼接到 currentFiber 节点的 lastBaseUpdate 节点后面，也就是说新的 update 对象会成为 currentFiber 节点新的 lastBaseUpdat 节点

还原 workInProgress 节点执行的函数是 prepareFreshStack，里面会用 currentFiber 节点的属性覆盖 workInProgress 节点，从而实现还原功能。所以就算 workInProgress 节点被重置，我们只要把 update对象 合并到 currentFiber 节点上，还原的时候依然会存在于新的 workInProgress 节点

state计算的连续性

问题现象

我们上面说到，低优先级任务重启，不能覆盖高优先级任务计算得到的值，且需要根据低优先级任务计算得到的newState，作为高优先级的baseState再去执行一次高优先级任务。什么意思呢这是？

state = { count: 0 }
componentDidMount() {
    const button = this.buttonRef.current
    // 低优先级任务 - AUpate
    setTimeout(() => this.setState({ count: 1 }), 1000)
    // 高优先级任务 - BUpdate
    setTimeout(() => button.click(), 1040)
}
handleButtonClick = () => {
    this.setState( prevState => {
      return { count: prevState.count + 2 }
    } )
}

上面代码所产生的update对象如下

AUpate = { lane: 低, payload: 1 }
BUpdate = { lane: 高, payload: state => ({ count: state.count + 2 }) }
  1. 先执行 AUpdate 任务
  2. AUpdate 的优先级比 BUpdate 的低，BUpdate 会打断 AUpdate 的执行。
  3. 那么 BUpdate 执行完，count的值为2
    问题来了
  4. BUpdate 是后进来的，AUpdate 不能覆盖掉 BUpdate 的结果
  5. AUpdate 执行的结果 count 会变成 1，那么 BUpdate 的结果需要在此基础上计算，也就是要得到3

这也就决定了我们要用队列的形式去存储所有 update对象。update对象的存储顺序决定了state计算的前后依赖性，从而保证状态的连续性和准确性

明确很重要的一点，优先级高低只会影响某个 update对象 是否会提前执行，不会影响最终的 state 结果。最终的 state 结果还是由更新队列中 update对象 的顺序决定的

如何解决

我们看到 processUpdateQueue 中有两部分都是在构造更新队列的

  • 一部分是位于函数开头的，将 update对象 合并到 currentFiber 节点
  • 一部分是位于函数末尾的，将 newBaseUpdate 赋值给 workInProgress 节点
    这两部分双剑合璧就完美解决我们的需求，currentFiber 是作用于本轮更新，workInProgress 则作用于下一轮更新，因为双缓存机制的存在，在 commit阶段 结尾，react 应用根节点的 current 指针就会指向 workInProgress 节点，workInProgress 节点在下一轮更新就会变成 currentFiber 节点。

这样无论是什么优先级，只要按顺序构造出更新队列，我就能计算出正确的newState，同时利用队列的性质，保证 update对象 间 state计算 的连续性

setState 执行之后，会执行一个叫 enqueueSetState 的方法，这个主要作用是创建 Update 对象和发起调度，可以看下这个函数的逻辑

enqueueSetState: function (inst, payload, callback) {
    // 1. inst是组件实例，从组件实例中拿到当前组件的Fiber节点
    var fiber = get(inst);
    var eventTime = requestEventTime();
    var lane = requestUpdateLane(fiber);
    // 2.1 根据更新发起时间、优先级、更新的payload创建一个update对象
    var update = createUpdate(eventTime, lane);
    update.payload = payload;

    // 2.2 如果 setState 有回调，顺便把回调赋值给 update 对象的 callback 属性
    if (callback !== undefined && callback !== null) {
      update.callback = callback;
    }

    // 3. 将 update 对象关联到 Fiber 节点的 updateQueue 属性中
    enqueueUpdate(fiber, update);
    // 4. 发起调度
    var root = scheduleUpdateOnFiber(fiber, lane, eventTime);
}

从上面源码可以清晰知道，setState 调用之后做的4件事情

  1. 根据组件实例获取其 Fiber 节点
  2. 创建 Update 对象
  3. 将 Update 对象关联到 Fiber 节点的 updateQueue 属性中
  4. 发起调度

根据组件实例获取其 Fiber 节点

其实就是拿组件实例中的 _reactInternals 属性，这个就是当前组件所对应的 Fiber 节点

function get(key) {
  return key._reactInternals;
}

题外话：react利用双缓存机制来完成 Fiber 树的构建和替换，也就是 current 和 workInProgress 两棵树，那 enqueueSetState 里面拿的是那棵树下的 Fiber 节点呢？

答案是：current树下的Fiber节点。具体的原理在下面update对象丢失问题再说明

创建update对象

function createUpdate(eventTime, lane) {
  var update = {
    eventTime: eventTime,
    lane: lane,
    tag: UpdateState,
    payload: null,
    callback: null,
    next: null
  };
  return update;
}

属性的含义如下：

  • eventTime：update对象创建的时间，用于ensureRootIsScheduled计算过期时间用
  • lane：此次更新的优先级
  • payload：setState的第一个参数
  • callback：setState的第二个参数
  • next：连接的下一个 update 对象

将Update对象关联到Fiber节点的updateQueue属性

这里执行的是 enqueueUpdate 函数，下面是我简化过后的逻辑

function enqueueUpdate(fiber, update) {
    var updateQueue = fiber.updateQueue;
    var sharedQueue = updateQueue.shared;
    var pending = sharedQueue.pending;

    if (pending === null) {
      update.next = update;
    } else {
      update.next = pending.next;
      pending.next = update;
    }
    sharedQueue.pending = update;
}

可以看到这里的逻辑主要是将 update 对象放到 fiber 对象的 updateQueue.shared.pending 属性中， updateQueue.shared.pending 是一个环状链表。

那为什么需要把它设计为一个环状链表？我是这样理解的

  1. shared.pending 存放的是链表的最后一个节点，那么在环状链表中，链表的最后一个节点的next指针，是指向环状链表的头部节点，这样我们就能快速知道链表的首尾节点
  2. 当知道首尾节点后，就能很轻松的合并两个链表。比如有两条链表a、b，我们想要把 b append到 a 的后面，可以这样做
const lastBPoint = bTail
const firstBPoint = bTail.next
lastBPoint.next = null
aTail.next = firstBPoint
aTail = lastBPoint

后面即使有c、d链表，同样也可以用相同的办法合并到a。react 在构建 updateQueue 链表上也用了类似的手法，新产生的 update 对象通过类似上面的操作合并到 updateQueue 链表，相关参考视频讲解：进入学习

发起调度

在 enqueueUpdate 末尾，执行了 scheduleUpdateOnFiber 函数，该方法最终会调用 ensureRootIsScheduled 函数来调度react的应用根节点。

当进入 performConcurrentWorkOnRoot 函数时，就代表进入了 reconcile 阶段，也就是我们说的 render 阶段。render 阶段是一个自顶向下再自底向上的过程，从react的应用根节点开始一直向下遍历，再从底部节点往上回归，这就是render阶段的节点遍历过程。

这里我们需要知道的是，在render阶段自顶向下遍历的过程中，如果遇到组件类型的Fiber节点，我们会执行 processUpdateQueue 函数，这个函数主要负责的是组件更新时 state 的计算

processUpdateQueue做了什么

processUpdateQueue函数主要做了三件事情

  1. 构造本轮更新的 updateQueue，并缓存到 currentFiber 节点中
  2. 循环遍历 updateQueue，计算得到 newState，构造下轮更新的 updateQueue
  3. 更新 workInProgress 节点中的 updateQueue、memoizedState 属性

这里的 updateQueue 并不指代源码中 Fiber 节点的 updateQueue，可以理解为从 firstBaseUpdate 到 lastBaseUpdate 的整条更新队列。这里为了方便描述和理解，直接用 updateQueue 替代说明。

变量解释

因为涉及的变量比较多，processUpdateQueue 函数的逻辑看起来并不怎么清晰，所以我先列出一些变量的解释方便理解

  • shared.pending：

    • enqueueSetState 产生的 update对象 环形链表

  • first/lastBaseUpdate：-- 下面我会用 baseUpdate 代替

    • 当前 Fiber 节点中 updateQueue 对象中的属性，代表当前组件整个更新队列链表的首尾节点

  • first/lastPendingUpdate：下面我会用 pendingUpdate 代替

    • shared.pending 剪开后的产物，分别代表新产生的 update对象 链表的首尾节点，最终会合并到 currentFiber 和 workInProgress 两棵树的更新队列尾部

  • newFirst/LastBaseUpdate：下面我会用 newBaseUpdate 代替

    • newState计算过程会得到，只要存在低优先级的 update 对象，这两个变量就会有值。这两个变量会赋值给 workInProgress 的 baseUpdate，作为下一轮更新 update对象 链表的首尾节点
  • baseState：newState 计算过程依赖的初始 state
  • memoizedState：当前组件实例的 state，processUpdateQueue 末尾会将 newState 赋值给这个变量

解释完变量，先上一张流程图，大家可以对照着看下面的解析。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zj5LEkXs-1665645021828)(https://p3-juejin.byteimg.com...)]

构造本轮更新的 updateQueue

上面我们说到 shared.pending 是enqueueSetState 产生的 update对象 环形链表，在这里我们需要剪断这个环形列表取得其中的首尾节点，去组建我们的更新队列。那如何剪断呢？

shared.pending 是环形链表的尾部节点，它的下一个节点就是环形链表的头部节点，参考上一小节我们提到的链表合并操作。

var lastPendingUpdate = shared.pending;
var firstPendingUpdate = lastPendingUpdate.next;
lastPendingUpdate.next = null;

这样就能剪断环形链表，拿到我们想要的新的 update 对象 —— pendingUpdate。接着我们要拿着这个 pendingUpdate 做两件事情：

  1. 将 pendingUpdate 合并到当前Fiber节点的更新队列
  2. 将 pendingUpdate 合并到 currentFiber树 中对应 Fiber节点 的更新队列

为什么要做这两件事情？

  1. 第一个是解决状态连续性问题，当出现多个 setState 更新时，我们要确保当前 update对象 的更新是以前一个 update对象 计算出来的 state 为前提。所以我们需要构造一个更新队列，新的 update对象 要合并到更新队列的尾部，从而维护state计算的连续性
  2. 第二个是解决 update 对象丢失问题。在 shared.pending 被剪开之后，shared.pending会被赋值为null，当有高优先级任务进来时，低优先级任务就会被打断，也就意味着 workInProgress 树会被还原，shared.pending 剪开之后得到的 pendingUpdate 就会丢失。这时就需要将 pendingUpdate 合并到 currentFiber树 的更新队列中

接下来可以大致看一下这一部分的源码

  var queue = workInProgress.updateQueue;
  var firstBaseUpdate = queue.firstBaseUpdate;
  var lastBaseUpdate = queue.lastBaseUpdate;

  // 1. 先拿到本次更新的 update对象 环形链表
  var pendingQueue = queue.shared.pending;

  if (pendingQueue !== null) {
    // 2. 清空pending
    queue.shared.pending = null;

    var lastPendingUpdate = pendingQueue;
    var firstPendingUpdate = lastPendingUpdate.next;
    // 3. 剪开环形链表
    lastPendingUpdate.next = null;

    // 4. 将 pendingupdate 合并到 baseUpdate
    if (lastBaseUpdate === null) {
      firstBaseUpdate = firstPendingUpdate;
    } else {
      lastBaseUpdate.next = firstPendingUpdate;
    }
    lastBaseUpdate = lastPendingUpdate;

    // 5. 将 pendingupdate 合并到 currentFiber树的 baseUpdate
    var current = workInProgress.alternate;
    if (current !== null) {
      var currentQueue = current.updateQueue;
      var currentLastBaseUpdate = currentQueue.lastBaseUpdate;

      if (currentLastBaseUpdate !== lastBaseUpdate) {
        if (currentLastBaseUpdate === null) {
          currentQueue.firstBaseUpdate = firstPendingUpdate;
        } else {
          currentLastBaseUpdate.next = firstPendingUpdate;
        }

        currentQueue.lastBaseUpdate = lastPendingUpdate;
      }
    }
  }

源码看起来很多，但本质上只做了一件事，从源码中可以看出这部分主要就是把 shared.pending 剪开，拿到我们的 pendingUpdate，再把 pendingUpdate 合并到本轮更新和 currentFiber 节点的 baseUpdate 中。

计算 newState

在这部分的源码中，除了计算 newState，还有另外一个重要工作是，构造下一轮更新用的 updateQueue。

到这里可能会有疑问，为什么需要构造下轮更新的 updateQueue，本轮更新我们把 shared.pending 里面的对象遍历计算完，再把 state 更新，下轮更新进来再根据这个 state 计算不行好了吗？

如果没有高优先级任务打断机制，确实是不需要在这里构造下轮更新的 updateQueue，因为每轮更新我们只会依赖当前的 state 和 shared.pending。

打断机制下，低优先级任务重启后的执行，需要依赖完整的更新队列才能保证 state 的连续性和正确性。下面我举个例子

state = { count: 0 }
componentDidMount() {
    const button = this.buttonRef.current
    // 低优先级任务
    setTimeout(() => this.setState({ count: 1 }), 1000)
    // 高优先级任务
    setTimeout(() => button.click(), 1040)
}
handleButtonClick = () => {
    this.setState( prevState => {
      return { count: prevState.count + 2 }
    } )
}

我们期望能实现的效果是 0 -> 2 -> 3，需求如下：

  1. 高优先级任务打断低优先级任务之后，不以低优先级任务计算得到的baseState做计算
  2. 低优先级任务重启后，不能覆盖高优先级任务计算得到的值，且需要根据低优先级任务计算得到的newState，作为高优先级的baseState再去执行一次高优先级任务

知道了需求，我们可以大概列一下实现思路：

  1. 低优先级任务打断后，高优先级任务执行之前，需要还原到低优先级任务执行之前的 workInPregress 节点，确保不受低优先级任务计算得到的 baseState 影响
  2. 需要维护一个更新对象队列，按执行顺序存储 update 对象，确保低优先级重启后，依然会执行高优先级任务

上面说的需求和实现思路在 react 的源码中实现其实是非常简单的，但要理解其中的含义可能需要费点功夫，下面可以看看我改动过后的源码，可以直接从 do...while 开始看

  function cloneUpdate(update) {
      return {
          eventTime: update.eventTime,
          lane: update.lane,
          tag: update.tag,
          payload: update.payload,
          callback: update.callback,
          next: null
      };
  }
  if (firstBaseUpdate !== null) {
    var newState = queue.baseState;

    var newBaseState = null;
    var newFirstBaseUpdate = null;
    var newLastBaseUpdate = null;
    var update = firstBaseUpdate;

    // 遍历 updateQueue
    do {
      var updateLane = update.lane;
      var updateEventTime = update.eventTime;

      // 校验当前 update 对象够不够优先级
      if (!isSubsetOfLanes(renderLanes, updateLane)) {
        // 优先级不够，我们需要从当前 update 对象开始重新构造一个更新队列
        var clone = cloneUpdate(update)

        if (newLastBaseUpdate === null) {
          newFirstBaseUpdate = newLastBaseUpdate = clone;
          // 当前的 newState 就作为下轮更新的 baseState 使用
          newBaseState = newState;
        } else {
          newLastBaseUpdate = newLastBaseUpdate.next = clone;
        }
      } else {
        // 优先级够
        if (newLastBaseUpdate !== null) {
          // newLastBaseUpdate 不为空，就代表存在优先级不够的 update 对象
          var _clone = cloneUpdate(update)
          // 为保证状态连续性，即使当前 update 对象优先级足够，也要被放到 updateQueue 中
          newLastBaseUpdate = newLastBaseUpdate.next = _clone;
        }
        // 计算newState
        newState = getStateFromUpdate(workInProgress, queue, update, newState, props, instance);
      }

      update = update.next;
    } while (update);

逻辑如下：

  • 优先级不够

    • 重新构造更新队列 newBaseUpdate，留到低优先级任务重启遍历
    • 记录当前 newState，留到低优先级任务重启作为 baseState 计算

  • 优先级足够

    • 看看 newBaseUpdate 有没有东西，有东西就把当前 update 对象也合并进去
    • 计算 newState

这里 newState 的计算逻辑很简单

  • payload是值。用对象包裹合并到 prevState 即可
  • payload是函数。传入 prevState 计算，将函数返回值也合并到 prevState 即可

更新 workInProgress 节点

更新 workInProgress 节点属性的逻辑不多，主要就是把 newBaseState、newBaseUpate 赋值给 workInProgress 节点，作为下一轮更新的 baseState 和更新队列使用

if (newLastBaseUpdate === null) {
  newBaseState = newState;
}

queue.baseState = newBaseState;
queue.firstBaseUpdate = newFirstBaseUpdate;
queue.lastBaseUpdate = newLastBaseUpdate;
workInProgress.memoizedState = newState;
  1. 如果 newLastBaseUpdate 为空，代表所有 update 对象为空，本轮更新计算得到的 newState 可以完全作为下轮更新的 baseState 使用。否则只能用出现首个不够优先级的 update 对象时缓存下来的 newState 作为下轮更新的 baseState
  2. 更新 baseUpdate，当所有 update 对象优先级足够，baseUpdate 的值一般为空。只有存在优先级不够的 update 对象时，才会有值
  3. 将 newState 赋值给 memoizedState， memoizedState 代表当前组件的所有 state

总结

看到上面的原理解析是不是很复杂，我们可以忽略所有的实现细节，回归现象本质，state计算就是遍历 update对象 链表根据 payload 得到新的state。在此前提下，因为优先级机制，打断之后会还原 workInProgress 节点，从而会引起 update对象 丢失问题 和 state计算连续性问题。解决这两个问题才是我们上面说的复杂的实现细节

update对象丢失问题

为什么会丢失

我们知道高优先级任务进来会打断低优先级任务的执行，打断之后会将当前的 workInProgress 节点还原为开始的状态，也就是可以理解为会将 workInProgress 树还原为当前页面所渲染的 currentFiber 节点。当 workInProgress 节点还原之后，我们本来存在 workInProgress 中的 updateQueue 属性也会被重置，那就意味着低优先级的 update 对象会丢失。

上面说到的，setState产生的新 update对象 是会放在 currentFiber 节点上也是这个原因，如果 setState 产生的新 update对象 放到 workInProgress 上，只要 workInProgress 被还原，这些 update对象 就会丢失

如何解决

我们在 processUpdateQueue 函数的开始阶段，将新产生的 update 对象，也就是 shared.pending 中的值，合并到 currentFiber( workInProgress.alternate ) 节点的 firstBaseUpdate 和 lastBaseUpdate。具体规则如下

  1. currentFiber 节点不存在 lastBaseUpdate，将新的 update 对象赋值给 currentFiber 节点的 firstBaseUpdate 和 lastBaseUpdate 属性
  2. currentFiber 节点存在 lastBaseUpdate，将新的 update 对象拼接到 currentFiber 节点的 lastBaseUpdate 节点后面，也就是说新的 update 对象会成为 currentFiber 节点新的 lastBaseUpdat 节点

还原 workInProgress 节点执行的函数是 prepareFreshStack，里面会用 currentFiber 节点的属性覆盖 workInProgress 节点，从而实现还原功能。所以就算 workInProgress 节点被重置，我们只要把 update对象 合并到 currentFiber 节点上，还原的时候依然会存在于新的 workInProgress 节点

state计算的连续性

问题现象

我们上面说到，低优先级任务重启，不能覆盖高优先级任务计算得到的值，且需要根据低优先级任务计算得到的newState，作为高优先级的baseState再去执行一次高优先级任务。什么意思呢这是？

state = { count: 0 }
componentDidMount() {
    const button = this.buttonRef.current
    // 低优先级任务 - AUpate
    setTimeout(() => this.setState({ count: 1 }), 1000)
    // 高优先级任务 - BUpdate
    setTimeout(() => button.click(), 1040)
}
handleButtonClick = () => {
    this.setState( prevState => {
      return { count: prevState.count + 2 }
    } )
}

上面代码所产生的update对象如下

AUpate = { lane: 低, payload: 1 }
BUpdate = { lane: 高, payload: state => ({ count: state.count + 2 }) }
  1. 先执行 AUpdate 任务
  2. AUpdate 的优先级比 BUpdate 的低，BUpdate 会打断 AUpdate 的执行。
  3. 那么 BUpdate 执行完，count的值为2
    问题来了
  4. BUpdate 是后进来的，AUpdate 不能覆盖掉 BUpdate 的结果
  5. AUpdate 执行的结果 count 会变成 1，那么 BUpdate 的结果需要在此基础上计算，也就是要得到3

这也就决定了我们要用队列的形式去存储所有 update对象。update对象的存储顺序决定了state计算的前后依赖性，从而保证状态的连续性和准确性

明确很重要的一点，优先级高低只会影响某个 update对象 是否会提前执行，不会影响最终的 state 结果。最终的 state 结果还是由更新队列中 update对象 的顺序决定的

如何解决

我们看到 processUpdateQueue 中有两部分都是在构造更新队列的

  • 一部分是位于函数开头的，将 update对象 合并到 currentFiber 节点
  • 一部分是位于函数末尾的，将 newBaseUpdate 赋值给 workInProgress 节点
    这两部分双剑合璧就完美解决我们的需求，currentFiber 是作用于本轮更新，workInProgress 则作用于下一轮更新，因为双缓存机制的存在，在 commit阶段 结尾，react 应用根节点的 current 指针就会指向 workInProgress 节点，workInProgress 节点在下一轮更新就会变成 currentFiber 节点。

这样无论是什么优先级，只要按顺序构造出更新队列，我就能计算出正确的newState，同时利用队列的性质，保证 update对象 间 state计算 的连续性

你可能感兴趣的:(react.js)

  • react.js 涔溪 react.js前端前端框架
    一、create-react-app全局安装create-react-app$npminstall-gcreate-react-app创建一个项目$create-react-appyour-app注意命名方式CreatinganewReactappin/dir/your-app.Installingpackages.Thismighttakeacoupleofminutes.安装过程较慢，Inst
  • React.js如何使用Bootstrap Vesper63 前端react.jsbootstrap前端
    在React.js项目中使用Bootstrap有多种方法，主要包括直接引入BootstrapCSS文件和使用ReactBootstrap库。下面将详细介绍这两种方法。方法一：直接引入BootstrapCSS文件这是最简单的方式，只需在项目中引入Bootstrap的CSS文件即可。安装Bootstrap：你可以通过npm或yarn安装Bootstrap：npminstallbootstrap或者：y
  • react起源 lemmo
    简介React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"dataflowsdown"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。它由Facebook、Instagra
  • 2024前端面试准备之uniapp篇 前端fighter 前端面试uni-app
    全文链接！！！！！！！1.UniApp和其他跨平台框架（如ReactNative、Flutter）有什么区别？语言和技术栈：UniApp使用Vue.js作为开发语言和技术栈，而ReactNative使用React.js，Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。性能和体验：UniApp的性能和用户体验相对较好，因为它使用原生渲染技术，可以实现更接近原生应用的
  • 快速创建react项目. River_tong
    react简介说起react，我相信大家都对它有一定的了解，react目前是前端界非常流行的一个框架了，react它产生了很多相关的技术，比如：我们常说的react.js，我们可以用react语法来编写一些网页版应用，reactnative这门技术使得我们可以用react语法来编写原生应用，reactVR可以借助react的语法来编写一些VR相关的应用或者说全景视图这样的应用。react开发环境搭
  • Vue前端】vue使用笔记0基础到高手第2篇：Vue进阶知识点介绍（附代码，已分享） vim前端
    本系列文章md笔记（已分享）主要讨论vue相关知识。Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js是一个构建数据驱动的web界面的渐进式框架，Vue.js的目标是通过尽可能简单的API实
  • Vue 与 React 比较，十年恩怨情仇整理
    过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V
  • 什么是VUE？ 最爱喝龙井
    什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整
  • 常见的web前端开发框架：Bootstrap 钟念 前端开发前端开发框架前端bootstrapvue.jshtmljavascript前端框架css
    常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Bootstrap框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Bootstrap基本概念：Bo
  • 常见的web前端开发框架：Vue.js 钟念 前端开发前端开发框架前端vue.jsjavascriptvue前端框架html
    常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Vue.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Vue.js基本概念：Vue.js是一
  • 常见的web前端开发框架：React.js 钟念 前端开发前端开发框架前端react.js前端框架javascript
    常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对React.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。React.jsReact.js是
  • 常见的web前端开发框架：Angular.js 钟念 前端开发前端开发框架前端前端框架angular.jsjavascripttypescriptnpmhtml5
    常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Angular.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Angular.js基本概念：
  • Vue 与 React 比较，十年恩怨情仇整理
    过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V
  • 新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践 全栈开发圈 react.jsnode.jsmongodb
    详解React.js全家桶及其结合Node.js、MongoDB进行全栈开发的方法实战企业级应用系统项目开发本书内容本书系统介绍Web应用全栈开发技术，通过一个真实的企业项目，讲解如何使用React全家桶以及Node.js、MongoDB进行全栈开发，帮助开发人员快速积累开发经验，全面掌握开发技巧。读完本书相当于真实参与一个完整的全栈项目开发。本书配套示例项目源代码。本书共分27章，内容包括开发环
  • React 与 Angular：项目的最佳框架 千源万码 react.jsangular.js前端
    什么是React？React或React.js是一个基于JavaScript的前端库，可帮助创建用户界面(UI)。它以声明式编程风格描绘UI状态。通过React，程序员可以掌握应用程序在开发后将如何呈现给用户以及他们将如何与用户交互。尽管React以开发Web应用程序而闻名，但它也有助于构建移动应用程序和本机呈现的应用程序。Facebook、Instagram、Netflix和纽约时报等全球公司在
  • web 技术栈有哪些？ 老马啸西风 web前端
    前端技术栈：HTML（超文本标记语言）：用于创建网页结构的标记语言，定义页面的内容和结构。CSS（层叠样式表）：用于设计和排版网页的样式表语言，负责页面的外观和样式。JavaScript：一种脚本语言，用于在浏览器中实现动态交互和客户端逻辑。常用的前端框架和库如React、Vue、Angular等，可以加速开发。前端框架和库：React.js、Vue.js、Angular等，用于简化和加速前端开发
  • DataBinding使用详解-Google官方的视图绑定 ZhangQiang- [Android进阶]
    几年前，数据绑定在便已在前端界风生水起，Angular.js、React.js、vue.js等热门前端框架都具备这种能力。Android端的开源库butterknife/Anotation/dragger2等等也非常好用且广受支持;数据绑定简单来说，就是通过某种机制，把代码中的数据和xml(UI)绑定起来，双方都能对数据进行操作，并且在数据发生变化的时候，自动刷新数据。在2015年的谷歌IO大会上
  • LLM应用开发与落地：使用gradio十分钟搭建聊天UI 前行的七哥 ui人工智能
    一、背景如果你是做LLM应用开发的，特别是做后端开发，你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中，毕竟react.js,next.js,css,html也不是每个人都那么熟练，对吧？即使你是做前端开发的，你也可以尝试一下Gradio，哪天有人给你提了一个调试界面的需求，原本要半天的工作现在只需要十分钟了，多余的时机用来学习或享受生活，多美（或
  • 通过 React 来构建界面 张培跃吧 Reactreact.jsjavascriptecmascript
    1-通过React来构建界面第1步：下载所需要的二个库文件至本地，如果需要加载指定版本的react和react-dom，可以把18替换成所需加载的版本号。react.js：React中的核心库文件。//开发版https://unpkg.com/react@18/umd/react.development.js//生产版https://unpkg.com/react@18/umd/react.pro
  • 如何在 React 中使用 Sass 网络研究院 网络研究院react.jssass前端编程项目
    Sass（语法很棒的样式表）是CSS的扩展，具有使其更强大的附加功能。Sass最好的一点是它与CSS的兼容性，这意味着您可以在Web开发项目中使用React等JavaScript框架。然而，与普通CSS不同，您需要进行一些设置才能使用Sass。通过设置一个简单的React.js项目并将Sass与其集成来了解其工作原理。如何在React.js项目中使用Sass与其他CSS处理器一样，React本身并
  • js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡 weixin_39610774 js获取今天剩余时间用js判断一个数是否是素数(质数)
    React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网
  • 前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡 蓝桥云课 webreactjs
    React.js是现今前端最火的应用框架之一，而**Next.js正是React.js领域最优秀的服务端渲染框架之一。**基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI
  • 【前端教程】手把手教你用 Next.js 搭建个人博客，从入门到吃鸡！ 实验楼v
    React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网
  • React-9：通过路由实现排序切换 kino2046
    queryString（查询字符串）通常我们把URL`?`后面的内容称为queryString，在React.js中，我们可以通过`this.props.location.search`来获取，它的值是字符串，格式为：?k1=v1&k2=v2，为了方便操作，我们把它转成对象形式URLSearchParams在原生JJavaScript中内置了一个URLSearchParams的类，我们通过它可以很
  • 构建高效外卖系统：技术实践与代码示例 万岳科技系统开发 数据库小程序
    外卖系统在现代社会中扮演着重要的角色，为用户提供了便捷的用餐解决方案。在这篇文章中，我们将探讨构建高效外卖系统的技术实践，同时提供一些基础的代码示例，帮助开发者更好地理解和应用这些技术。1.技术栈选择构建外卖系统首先需要选择合适的技术栈。以下是一个简单的技术栈示例：前端：React.js后端：Node.js数据库：MongoDB实时通信：WebSocket云服务：AWS或Azure2.用户认证与授
  • React.js快速入门教程 heiyay react.js前端前端框架
    介绍React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。React.js的特点1.声明式设计−React采用声明范式，可以轻松描述应用。2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活−React可以与已知的库或框架很好地配合。4.JSX−JSX是J
  • useRef钩子大法好！ 今天也想MK代码 javascriptreact.js前端
    在React.js中，useRef是一个钩子，允许你创建一个对元素或值的可变引用。与useState钩子不同，更新useRef不会触发组件的重新渲染。它通常用于直接访问和管理DOM元素，存储持久值，或处理不应触发重新渲染的值。useRef的基本语法如下：constrefContainer=useRef(initialValue);useRef的主要用途1.访问DOM元素useRef的一个最常见的用
  • Vue.js 学习Day1 cf6d95617c55
    Vue.js-Day1课程介绍前5天：都在学习Vue基本的语法和概念；打包工具Webpack,Gulp后5天：以项目驱动教学；什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js
  • 【React.js 06】Redux基础知识 IUVO
    Redux是一个专注于状态管理的库，和React是解耦的，用Angular和Vue都可以使用Redux。其具有一个单一状态，单向数据流的特性。Redux概念redux有一个store，记录所有的state，state要改变的时候，就通知dispatch去执行action，reducer拿到state和action去生成新的state，store.subscribe根据新的state重新渲染出改变后
  • 前端八股文系列（七） React 面试专题 微莱羽墨 前端前端react.js面试
    文章目录React面试专题React.js是MVVM框架吗?hooks用过吗？聊聊react中class组件和函数组件的区别React组件通信方式1）父组件向子组件通信2）子组件向父组件通信3）跨级组件通信4）非嵌套关系的组件通信setState既存在异步情况也存在同步情况生命周期说一下react-fiber1）背景2）实现原理Portals何时要使用异步组件？如和使用异步组件React事件绑定原
  • 多线程编程之理财 周凡杨 java多线程生产者消费者理财
          现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元 （暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，
  • [Zookeeper学习笔记之三]Zookeeper会话超时机制 bit1129 zookeeper
    首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED
  • SecureCRT快捷键 daizj secureCRT快捷键
    ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w:  删除光标至行首
  • Java 子类与父类这间的转换 周凡杨 java 父类与子类的转换
        最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象 强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。       代码：            
  • 可视化swing界面编辑 朱辉辉33 eclipseswing
          今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。       首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui
  • web报表工具FineReport常用函数的用法总结（文本函数） 老A不折腾 finereportweb报表工具报表软件java报表
    文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。 示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。   CODE CODE(text):计算文本串中第一个字
  • mysql安装出错 林鹤霄 mysql安装
    [root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing...                #####################
  • linux下编译libuv aigo libuv
    下载最新版本的libuv源码，解压后执行： ./autogen.sh   这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool     如果提示错误：make: *** No targe
  • 中国行政区数据及三级联动菜单 alxw4616
    近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用   文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局 发布时间：2014-01-17 15:0
  • 哈夫曼加密文件 百合不是茶 哈夫曼压缩哈夫曼加密二叉树
     在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤;   加密步骤:  1,统计文件中字节出现的次数,作为权值   2,创建节点和哈夫曼树   3,得到每个子节点01串   4,使用哈夫曼编码表示每个字节  
  • JDK1.5 Cyclicbarrier实例 bijian1013 javathreadjava多线程Cyclicbarrier
    CyclicBarrier类 一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，
  • 九项重要的职业规划 bijian1013 工作学习
    一. 学习的步伐不停止        古人说，活到老，学到老。终身学习应该是您的座右铭。        世界在不断变化，每个人都在寻找各自的事业途径。        您只有保证了足够的技能储
  • 【Java范型四】范型方法 bit1129 java
    范型参数不仅仅可以用于类型的声明上，例如   package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value =
  • 【Hadoop十三】HDFS Java API基本操作 bit1129 hadoop
      package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo
  • ua实现split字符串分隔 ronin47 lua split
    LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从 而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函
  • java-从先序遍历和中序遍历重建二叉树 bylijinnan java
    public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4
  • openfire开发指南《连接和登陆》 开窍的石头 openfire开发指南smack
    第一步     官网下载smack.jar包     下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步     把smack里边的jar导入你新建的java项目中 开始编写smack连接openfire代码 p
  • [移动通讯]手机后盖应该按需要能够随时开启 comsci 移动
        看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎      但是，对于手机的新设计，有几点我们也要注意      第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,
  • 20款国外知名的php开源cms系统 cuiyadll cms
    内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。 在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管
  • Java生成全局唯一标识符 darrenzhu javauuiduniqueidentifierid
    How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow
  • php安装模块检测是否已安装过, 使用的SQL语句 dcj3sjt126com sql
    SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。 本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T
  • 5天学会一种 web 开发框架 dcj3sjt126com Web框架framework
    web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握 一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架 各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路 建议把本文
  • Gson使用三(Map集合的处理,一对多处理) eksliang jsongsonGson mapGson 集合处理
    转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述        Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。 二、Map参考实例 package com.ickes.json; import java.lang.refl
  • cordova实现“再点击一次退出”效果 gundumw100 android
    基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b
  • openldap configuration leaning note iwindyforest configuration
    hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts
  • Nullability and Objective-C 啸笑天 Objective-C
    https://developer.apple.com/swift/blog/?id=25   http://www.cocoachina.com/ios/20150601/11989.html   http://blog.csdn.net/zhangao0086/article/details/44409913   http://blog.sunnyxx
  • jsp中实现参数隐藏的两种方法 macroli JavaScriptjsp
    在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////
  • Bootstrap A标签关闭modal并打开新的链接解决方案 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。 可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。   <a href="#/group-buy" class="btn bt
  • 二维数组在Java和C中的区别 流淚的芥末 javac二维数组数组
    Java代码：   public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } }  运行结果： Exception in thread "mai
  • systemctl命令用法 wmlJava linuxsystemctl
    对比表，以 apache / httpd 为例 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他