标题:useDeferredValue in React 18
前置知识:useDeferredValue的使用
概览
这是一篇外文帖子的节选,取其内容主旨并辅以demo,阅读这篇文章你可以了解到:
- useDeferredValue 与 debounce 区别
- 通过示例看到useDeferredValue在低性能机器上的表现
useDeferredValue 与 debounce 区别
区别就在于这一句话useDeferredValue是否延迟取决于计算机的性能,如果计算机运行不够快,导致渲染占用的时间过长,则会产生一个落后于观察值的延时值。
示例
正常cpu上的表现
搜索框与列表几乎是同步改变的。
4倍cpu降速表现
列表的内容稍慢与搜索框的内容出现。
PS
:4倍降速模拟,在性能(performance)面板上的cpu节流功能,如下图所示
总结
useDeferredValue的延迟性取决于计算机的性能。在一次批量更新中能否完成,完成不了则会使值落后于观察值,并且通过一个demo演示了产生延迟时的效果。