为了解决 UI 和数据同步复杂性的问题,Data Binding 被提出并获得了普遍应用。其中两个主要的流派是:
Key Value Observable (KVO),以 Ember、Meteor 和 Knockout 为表明
Dirty Check,主要以 Angular 为表明
传统的 Data Binding 实如今渲染 DOM 以后,须要不断从数据侧和 DOM 自己检测变化从而完成 UI 和数据的双向同步。React 则选择了另一条彻底不一样的路:单向渲染,或者更加本质地来讲
React就像是一个纯函数,只会根据用户提供的数据构建出符合预期的UI。数据改变是经过从新调用render方法来实现UI的刷新(与双向数据绑定有本质的区别)。浏览器
每次render都采用彻底更新的方式是不可接受的,当前浏览器的性能并不足以在这种状况下提供能够容忍的使用体验。
React经过 在Js和Dom之间增长了一个新的抽象表示层,在须要更新时,对比这一表示层的diff,从而实现 差量更新Dom。
能够这样评价虚拟 DOM:正是这一技术使得 React 在保持单向渲染理念的同时,在性能上和 Data Binding 方案保持在同一水准dom
React 在每次 收到数据更新以后,会进行一次 调和过程 并一次性更新 DOM,这在通常状况下不存在显著的性能瓶颈。但在一些须要 UI 快速响应的场景中,例如动画、手势等,当 DOM 的更新量较多或者 JS 逻辑较为复杂时,就会引发卡顿等有损体验的状况。
Fiber 已经成为了做为 新一代调和过程的基础
Fiber 的主要特性是 支持增量渲染:可以 将渲染工做分割为小块,而且将它们分散到多个帧中。
原调和过程会 沿组件树递归遍历,遇到须要更新的状况时直接更新 DOM。因为 JS 和样式计算、布局(Layout)以及许多状况下的绘制 共享浏览器主线程,若是有的组件执行时间较长,就会致使一些须要快速响应的更新被阻塞,进而致使卡顿等有损用户体验的现象
新的基于 Fiber 的调和过程 将原来的递归遍历打散,能够每次只计算部分节点的更新内容后回到主逻辑查看是否有须要当即更新的高优先级内容,从而可以实现快速响应。
原文: React 设计中的闪光点函数