我正在阅读Reaction网站上的学习react 文档,在排队一系列状态更新部分有一句话是这样写的 在您的事件处理和其中的任何代码完成之前,不会更新UI.从这里我得到的印象是只能有一种渲染 每次onClick事件,但在运行下面的组件时,该组件似乎重新呈现了两次.一次是在添加挂起状态时,另一次是在setTimeout函数内递减挂起状态和递增状态时.
function RequestTracker() {
const [pending, setPending] = useState(0);
const [completed, setCompleted] = useState(0);
useEffect(() => {
console.log("MyComponent rendered!");
});
function handleClick() {
setPending((p) => p + 1);
setTimeout(() => {
setCompleted((c) => c + 1);
setPending((p) => p - 1);
}, 3000);
}
return (
<>
<h3>Pending: {pending}</h3>
<h3>Completed: {completed}</h3>
<button onClick={handleClick}>Buy</button>
</>
);
}
这是否与仅呈现UIafter的语句相矛盾,事件处理程序完成其中的所有代码?
使用useEffect,每次单击确实有多个渲染.我应该怎么想 如何对重新渲染进行排队和执行.谢谢!