1

我想确认我对功能组件和 useReducer 所做的假设。根据我的理解，useState 就是 useReducer，所以我将在这个例子中使用 useState 来简化。

function Example(){
 const [count, setCount] = useState(0);
 
 return <Button onClick={()=> setCount(c=>c+1)} >{count}</button>
}

我是否保证在调用setCount下一个渲染周期后将包含更新的计数值。我知道可以批量更新，以便在我看到渲染之前可以多次调用 setCount，但是在应用 setCount 的更改之前是否可以看到渲染？

批量更新可能会导致类似这样的结果（假设我在同一个事件调用中再次调用 setCount 或有悬念）：

0
click => 1
click, click => 3 // 2 did not result in a render
click, click, click => 6 // 4 and 5 did not result in a render

这就是为什么使用 setCount 的委托重载来确保它正在修改当前版本的状态至关重要的原因。

但是，是否有可能看到两次呈现相同的状态，一次是在单击之前，一次是在单击之后：

0
click => 0
1
click => 2

在上面的示例中，计数从 0 开始，我单击（调用 setCount），但是在 setCount 被“应用”之前，我看到了一个旧的“排队”渲染。因此，即使我单击并调用了 setCount，但在看到 setCount 触发的新值之前，我还是看到了旧的渲染。这是可能的还是可以安全地假设我永远不会看到一个值比上一次 setCount 调用中的值更旧的渲染。

4

0 回答 0