React系列继续进行,今天让我们谈谈。不用说,让我们以一个例子(React 18)介绍今天的主题:
上面的示例模拟了关键字搜索的应用。它注意到,在每个搜索结果中,我们在空中散发了100,000次以模拟时间耗尽的渲染过程。因此,当我们搜索时,我们会感到明显的口吃现象:
根本原因是搜索列表的渲染是一个非常耗时的操作,并且整个React应用程序的更新被IT所阻止。但实际上,列表的列表可以稍后稍后,并且更新的更新搜索关键字必须足够及时使用户感觉光滑,也就是说,优先级的两个更新是季节。出现是解决此类问题。
我们优化了由React提供的上述示例:
可以看出,搜索体验现在非常柔滑:
当我们进入输入框时,我们将触发:
React发现存在高优先级更新和插入,该更新将在步骤4中取消更新任务,开始处理和:
在出现之前,我们很容易考虑使用(反剥离)解决此问题:
但是无法解决此问题。如下所示,让我们先输入,然后在打印后继续输入,显然不会立即呈现后期输入的内容:
原因是它只会减少呼叫,但治疗没有治愈。呼叫触发更新后,React的渲染过程仍将阻止用户交互。
从监视面板中,有两个任务花费超过1个任务(默认情况下,React不会打开并发模式,因此在这里没有时间切片),分别与输入和触发更新相对应。
俗话说:“铃铛一定是钟声。” React通过虚拟DOM,协调算法和其他手段为前端程序员的发展带来了巨大的便利。它还引入了一些费用。很难“治愈”外部手段的原因。
注意公共帐户“前端游戏”,让我们在前端的前面游泳。