面试导航 - 程序员面试题库大全 | 前端后端面试真题 | 面试

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
 
import reportWebVitals from './reportWebVitals';
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'), {
  unstable_concurrentUpdatesByDefault: true,
});
 
root.render(<App />);
 
reportWebVitals();
1;

ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = function (
  children: ReactNodeList,
): void {
  debugger;
  const root = this._internalRoot;
  if (root === null) {
    throw new Error('Cannot update an unmounted root.');
  }
  updateContainer(children, root, null, null);
};

// src/react/packages/react-reconciler/src/ReactFiberReconciler.old.js
export function updateContainer(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component<any, any>,
  callback: ?Function,
): Lane {
  // 获取当前的rootFiber对象
  const current = container.current;
 
  // 获取程序运行到目前为止的时间，用于进行优先级排序
  const eventTime = requestEventTime();
  // 同步直接返回 `SyncLane` = 1。以后开启并发和异步等返回的值就不一样了，目前只有同步这个模式
  const lane = requestUpdateLane(current);
 
  if (enableSchedulingProfiler) {
    // 在Performance接口中标记--schedule-render-{当前lane}用于性能分析
    markRenderScheduled(lane);
  }
 
  // 获取当前节点和子节点的上下文
  const context = getContextForSubtree(parentComponent);
 
  if (container.context === null) {
    container.context = context;
  } else {
    container.pendingContext = context;
  }
 
  // 创建一个 update 对象
  const update = createUpdate(eventTime, lane);
 
  // 记录update的载荷信息
  update.payload = { element };
 
  // 如果有回调信息，保存
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    update.callback = callback;
  }
  // 将新建的update入队
  const root = enqueueUpdate(current, update, lane);
 
  if (root !== null) {
    scheduleUpdateOnFiber(root, current, lane, eventTime);
 
    entangleTransitions(root, current, lane);
  }
  return lane;
}

const current = container.current;

const lane = requestUpdateLane(current);

export function requestUpdateLane(fiber: Fiber): Lane {
  const mode = fiber.mode;
  if ((mode & ConcurrentMode) === NoMode) {
    // concurrent 模式
    return (SyncLane: Lane);
  } else if (
    !deferRenderPhaseUpdateToNextBatch &&
    (executionContext & RenderContext) !== NoContext &&
    workInProgressRootRenderLanes !== NoLanes
  ) {
 
    /**
     * 当新的更新任务产生时，workInProgressRootRenderLanes不为空，则表示有任务正在执行
     * 那么则直接返回这个正在执行的任务的lane，那么当前新的任务则会和现有的任务进行一次批量更新
     */
    return pickArbitraryLane(workInProgressRootRenderLanes);
  }
 
  /**
   * 检查当前事件是否为过渡优先级,例如使用了 Suspense 或者 useTransition
   * 每次调用优先级都会降低
   * 过渡优先级共有16位:当所有位都使用完后，则又从第一位开始赋予事件过渡优先级
   */
  const isTransition = requestCurrentTransition() !== NoTransition;
  if (isTransition) {
 
    if (currentEventTransitionLane === NoLane) {
      currentEventTransitionLane = claimNextTransitionLane();
    }
    console.log('当前优先级',currentEventTransitionLane);
    return currentEventTransitionLane;
  }
 
  /**
   * 返回当前任务优先级
   * updateLane 优先级为 0
   */
  const updateLane: Lane = (getCurrentUpdatePriority(): any);
  if (updateLane !== NoLane) {
    return updateLane;
  }
 
  /**
   * 返回当前事件的优先级
   * 如果没有事件返回,则返回 DefaultEventPriority
   * 如果有,根据事件类型返回优先级
   * eventLane 优先级为16
   */
  const eventLane: Lane = (getCurrentEventPriority(): any);
  return eventLane;
}

const update = createUpdate(eventTime, lane);
update.payload = { element };

function createUpdate(eventTime, lane) {
  return {
    eventTime,
    lane,
    payload: null,
  };
}
 
const update = createUpdate(Date.now(), someLane);
update.payload = { element: <div>Moment</div> };

// 将新建的update入队
const root = enqueueUpdate(current, update, lane);

export function enqueueUpdate<State>(
  fiber: Fiber,
  update: Update<State>,
  lane: Lane
): FiberRoot | null {
  const updateQueue = fiber.updateQueue;
  if (updateQueue === null) {
    // fiber 被卸载时
    return null;
  }
 
  // 返回一个对象 {interleaved:null, lanes:0, pending:null}
  const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
 
  // pending 永远指向最后一个更新
  if (isUnsafeClassRenderPhaseUpdate(fiber)) {
    const pending = sharedQueue.pending;
    if (pending === null) {
      // 第一次更新创建一个循环单链表
      update.next = update;
    } else {
      // 如果更新队列不为空,取出第一个更新
      update.next = pending.next;
      pending.next = update;
    }
    sharedQueue.pending = update;
    return unsafe_markUpdateLaneFromFiberToRoot(fiber, lane);
  } else {
    return enqueueConcurrentClassUpdate(fiber, sharedQueue, update, lane);
  }
}

const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;

if (isUnsafeClassRenderPhaseUpdate(fiber)) {
  const pending = sharedQueue.pending;
  if (pending === null) {
    // 第一次更新创建一个循环单链表
    update.next = update;
  } else {
    // 如果更新队列不为空,取出第一个更新
    update.next = pending.next;
    pending.next = update;
  }
  sharedQueue.pending = update;
  return unsafe_markUpdateLaneFromFiberToRoot(fiber, lane);
} else {
  return enqueueConcurrentClassUpdate(fiber, sharedQueue, update, lane);
}

export function enqueueConcurrentClassUpdate<State>(
  fiber: Fiber,
  queue: ClassQueue<State>,
  update: ClassUpdate<State>,
  lane: Lane
) {
  const interleaved = queue.interleaved;
  if (interleaved === null) {
    update.next = update;
 
    pushConcurrentUpdateQueue(queue);
  } else {
    update.next = interleaved.next;
    interleaved.next = update;
  }
  queue.interleaved = update;
  return markUpdateLaneFromFiberToRoot(fiber, lane);
}

import React, { useState, useEffect } from 'react';
 
const Counter = () => {
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    // 多次调用 setCount 更新状态
    setCount((prevCount) => {
      console.log('Update 1:', prevCount + 1);
      return prevCount + 1;
    });
    setCount((prevCount) => {
      console.log('Update 2:', prevCount + 1);
      return prevCount + 1;
    });
    setCount((prevCount) => {
      console.log('Update 3:', prevCount + 1);
      return prevCount + 1;
    });
  };
 
  useEffect(() => {
    console.log('Effect:', count);
  }, [count]);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};
 
export default Counter;

if (root !== null) {
  scheduleUpdateOnFiber(root, current, lane, eventTime);
  // 如果fiberRoot存在，则纠缠车道队列
  entangleTransitions(root, current, lane);
}