31. React源码之更新优先级--高优更新打断低优更新

在构建Fiber树过程中如果出现高优更新，则高优更新会先执行。

代码详情

useEffect中的更新优先级低于onClick中的更新优先级，当useEffect中的更新在渲染中，onClick中的更新可以打断更新，优先执行。

1. main.jsx

function FunctionComponent() {
  console.log('FunctionComponent');
  const [numbers, setNumbers] = React.useState(new Array(10).fill('A'));
  React.useEffect(() => {
    setNumbers(numbers => numbers.map(number => number + 'B'));
  }, [])
  return (
    <button onClick={() => setNumbers((numbers) => numbers.map(number => number + 'C'))}>
      {
        numbers.map((number, index) => <span key={index} >{number}</span>)}</button>
  )
}
let element = <FunctionComponent />
const root = createRoot(document.getElementById("root"));
root.render(element);

2. ReactDOMEventListener.js

function dispatchDiscreteEvent(domEventName, eventSystemFlags, container, nativeEvent) {
  const previousPriority = getCurrentUpdatePriority();
  try {
    setCurrentUpdatePriority(DiscreteEventPriority);
    dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
  } finally {
    setCurrentUpdatePriority(previousPriority);
  }
}

3. ReactFiberWorkLoop.js

function ensureRootIsScheduled(root) {
  ...
  const existingCallbackNode = root.callbackNode;
  if (existingCallbackNode !== null) {
    Scheduler_cancelCallback(existingCallbackNode);
  }
   ...
  newCallbackNode = Scheduler_scheduleCallback(schedulerPriorityLevel, performConcurrentWorkOnRoot.bind(null, root));
  root.callbackNode = newCallbackNode
  root.callbackPriority = newCallbackPriority;
  ...
}

3. Scheduler.js

function unstable_cancelCallback(task) {
  task.callback = null;
}

4. 输出
   先显示 AAA...，点击AAA...，显示ACACAC...，最后显示ABCABCABC...