React useDeferredValue源码

useDeferredValue是一个React hook，用于延迟更新UI。

可以使用在数据更新但UI可以延迟渲染的地方，如果状态变化会触发大量渲染时，useDeferredValue可以减少UI的渲染，避免卡顿。

mountDeferredValue

useDeferredValue会中会进行新旧value的比较，所以需要创建一个hook对象。

在mount阶段直接显示了value，不会延迟。

// mountDeferredValueImpl
function mountDeferredValueImpl<T>(hook: Hook, value: T, initialValue?: T): T {
  if (
    enableUseDeferredValueInitialArg &&
    initialValue !== undefined &&
    !includesSomeLane(renderLanes, DeferredLane)
  ) {
    // ......
  } else {
    hook.memoizedState = value;
    return value;
  }
}

updateDeferredValue

在update阶段，会从上一次渲染的hook中拿到value，与新的value进行比较。

function updateDeferredValue<T>(value: T, initialValue?: T): T {
  const hook = updateWorkInProgressHook();
  const resolvedCurrentHook: Hook = (currentHook: any);
  const prevValue: T = resolvedCurrentHook.memoizedState;
  return updateDeferredValueImpl(hook, prevValue, value, initialValue);
}

updateDeferredValueImpl的更新步骤:

1. 比较value：如果value没有发生变化，直接返回；
2. 比较lanes：
   1. 如果本次渲染的renderLanes中都是高优先级，跳过value的更新，合并deferredLanes到当前fiber的lanes上，返回旧值；
   2. 如果本次渲染包含低优先级，更新并返回value。