React Fiber 了解一下

旧版React中，更新过程是同步的，这可能会导致性能问题。

当React决定要更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，一鼓作气运行到底，中途绝不停歇。表面上看，这样的设计也是挺合理的，因为更新过程不会有任何I/O操作嘛，完全是CPU计算，所以无需异步操作，的确只要一路狂奔就行了，但是，当组件树比较庞大的时候，问题就来了。

假如更新一个组件需要1毫秒，如果有200个组件要更新，那就需要200毫秒，在这200毫秒的更新过程中，浏览器那个唯一的主线程都在专心运行更新操作，无暇去做任何其他的事情。想象一下，在这200毫秒内，用户往一个input元素中输入点什么，敲击键盘也不会获得响应，因为渲染输入按键结果也是浏览器主线程的工作，但是浏览器主线程被React占着呢，抽不出空，最后的结果就是用户敲了按键看不到反应，等React更新过程结束之后，咔咔咔那些按键一下子出现在input元素里了。

这就是所谓的界面卡顿，很不好的用户体验。

所以Fiber 架构就是用异步的方式解决旧版本同步递归导致的性能问题。

破解JavaScript中同步操作时间过长的方法其实很简单——分片。

把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会

维护每一个分片的数据结构，就是Fiber。

module.exports = {NoWork: 0, // No work is pending.SynchronousPriority: 1, // For controlled text inputs. Synchronous side-effects.AnimationPriority: 2, // Needs to complete before the next frame.HighPriority: 3, // Interaction that needs to complete pretty soon to feel responsive.LowPriority: 4, // Data fetching, or result from updating stores.OffscreenPriority: 5, // Won't be visible but do the work in case it becomes visible.
};

React Fiber 每个工作单元运行时有6种优先级

React Fiber 了解一下相关推荐

React Fiber 原理介绍
欢迎关注我的公众号睿Talk,获取我最新的文章: 一.前言在 React Fiber 架构面世一年多后,最近 React 又发布了最新版 16.8.0,又一激动人心的特性:React Hooks 正 ...
深入了解React新引擎：React Fiber
Facebook正在以流行的JavaScript框架React为基础开发一个全新的架构.这个名为React Fiber的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度. ...
转载：React Fiber架构（浅显易懂）
性能优化是一个系统性的工程,如果只看到局部,引入算法,当然是越快越好; 但从整体来看,在关键点引入缓存,可以秒杀N多算法,或另辟蹊径,探索事件的本质,可能用户要的并不是快-- React16启用了全新 ...
浅析 React Fiber
引言在 react 进入大家视野之初,Virtual DOM(VDOM)的概念让人眼前一亮,在操作真正的 DOM 之前,先通过 VDOM 前后对比得出需要更新的部分,再去操作真实的 DOM,减少了浏 ...
react fiber_让我们爱上React Fiber
react fiber by Ryan Yurkanin 瑞安·尤卡宁(Ryan Yurkanin) 让我们爱上React Fiber (Let's fall in love with React F ...
[react] React Fiber它的目的是解决什么问题？
[react] React Fiber它的目的是解决什么问题? 我个人的理解: React 15 的 StackReconciler 方案由于递归不可中断问题,如果 Diff 时间过长(JS计算时间) ...
React系列——React Fiber 架构介绍资料汇总（翻译+中文资料）
原文 react-fiber-architecture 介绍 React Fibre是React核心算法正在进行的重新实现.它是React团队两年多的研究成果. React Fiber的目标是提高其对 ...
六个问题让你更懂 React Fiber
作者 | 零一0101 来源 | 前端印象 React Fiber 是Facebook花费两年余时间对 React 做出的一个重大改变与优化,是对 React 核心算法的一次重新实现.从Faceboo ...
前端工程师的自我修养：React Fiber 是如何实现更新过程可控的
前言从 React 16 开始,React 采用了 Fiber 机制替代了原先基于原生执行栈递归遍历 VDOM 的方案,提高了页面渲染性能和用户体验.乍一听 Fiber 好像挺神秘,在原生执行栈都还 ...

React Fiber 了解一下

React Fiber 了解一下相关推荐

最新文章

热门文章