在構(gòu)建Fiber樹過程中如果出現(xiàn)高優(yōu)更新搭儒，則高優(yōu)更新會先執(zhí)行挣输。
代碼詳情
useEffect中的更新優(yōu)先級低于onClick中的更新優(yōu)先級咳蔚，當(dāng)useEffect中的更新在渲染中刃滓，onClick中的更新可以打斷更新狂票，優(yōu)先執(zhí)行拥娄。
- 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);
- ReactDOMEventListener.js
function dispatchDiscreteEvent(domEventName, eventSystemFlags, container, nativeEvent) {
const previousPriority = getCurrentUpdatePriority();
try {
setCurrentUpdatePriority(DiscreteEventPriority);
dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
} finally {
setCurrentUpdatePriority(previousPriority);
}
}
- 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;
...
}
- Scheduler.js
function unstable_cancelCallback(task) {
task.callback = null;
}
- 輸出
先顯示 AAA...蚊锹，點(diǎn)擊AAA...，顯示ACACAC...稚瘾，最后顯示ABCABCABC...
