React高性能的原理和React Fiber

React高性能的原理

    在web开发中我们总需要将变化的数据实时反映到ui上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。
   React为此引入了虚拟DOM(VirtualDOM)的机制:在浏览器端用JavaScript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化是,React都会重新构建整个DOM树,然后React将当前整个DOM树与上一次的DOM树进行对比,得到DOM结构的区别,然后将需要变化的部分进行实际的浏览器更新而且React能够能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容A-B,B-A,React会认为A变成B,B变成A UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。

   尽管每一次度需要重新构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能极高,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面如何Render的。

React Fiber:
    在React
16之后发布的一种核心算法,React Fiber是对核心算法的一次重新实现,之前用的是diff算法。在之前的React中,更新过程是同步的,这可能会导致性能问题。

   当React决定要加载或者更新组件树时,会做很多事,比如调用各个组件的生命周期,计算和比对     Virtual  DOM,最后更新DOM树,这整个过程是同步的,也就是说只要一个家在或者更新过程开始,中途不会中断。因为JavaScript单线程的特点,如果组件树很大的时候,每个同步任务耗时太长,就会出现卡顿。

 React Fiber 的方法其实很简单-----分片,把一个耗时很长的任务分成很多小片,每一个小片运行时间很短,虽然总时间依然很长,但是在每个小片执行完以后,都会给其他任务一个执行的机会,这样唯一的线程不会被一直占用,其他任务依然有运行的机会

原文地址:https://www.cnblogs.com/chenlongsheng/p/15402544.html