React中闪光点

单向数据流

Data Binding

为了解决 UI 和数据同步复杂性的问题,Data Binding 被提出并得到了广泛应用。其中两个主要的流派是:
Key Value Observable (KVO),以 Ember、Meteor 和 Knockout 为代表
Dirty Check,主要以 Angular 为代表
传统的 Data Binding 实现在渲染 DOM 之后,需要不断从数据侧和 DOM 本身检测变化从而完成 UI 和数据的双向同步。React 则选择了另外一条完全不同的路:单向渲染,或者更加本质地来说

React就像是一个纯函数,只会根据用户提供的数据构建出符合预期的UI。数据改变是通过重新调用render方法来实现UI的刷新(与双向数据绑定有本质的区别)。

虚拟 DOM

每次render都采用完全更新的方式是不可接受的,当前浏览器的性能并不足以在这种情况下提供可以容忍的使用体验。
React通过 在Js和Dom之间增加了一个新的抽象表示层,在需要更新时,对比这一表示层的diff,从而实现 差量更新Dom
可以这样评价虚拟 DOM:正是这一技术使得 React 在保持单向渲染理念的同时,在性能上和 Data Binding 方案保持在同一水准

Fiber

React 在每次 收到数据更新之后,会进行一次 调和过程 并一次性更新 DOM,这在一般情况下不存在显著的性能瓶颈。但在一些需要 UI 快速响应的场景中,例如动画、手势等,当 DOM 的更新量较多或者 JS 逻辑较为复杂时,就会引起卡顿等有损体验的情况。
Fiber 已经成为了作为 新一代调和过程的基础
Fiber 的主要特性是 支持增量渲染:能够 将渲染工作分割为小块,并且将它们分散到多个帧中。
原调和过程会 沿组件树递归遍历,遇到需要更新的情况时直接更新 DOM。由于 JS 和样式计算、布局(Layout)以及许多情况下的绘制 共享浏览器主线程,如果有的组件执行时间较长,就会导致一些需要快速响应的更新被阻塞,进而导致卡顿等有损用户体验的现象
新的基于 Fiber 的调和过程 将原来的递归遍历打散,可以每次只计算部分节点的更新内容后回到主逻辑查看是否有需要立即更新的高优先级内容,从而能够实现快速响应。
原文: React 设计中的闪光点

posted @ 2018-02-01 17:22  joe_ice  阅读(146)  评论(0)    收藏  举报