React 背景知识
React 是一个用于构建用户界面的 JavaScript 库,主要用于构建 UI,而不是一个 MVC 框架,但可以使用 React 作为 MVC 架构的 View 层轻易的在已有项目中使用,它是一个用于构建用户界面的 JavaScript 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网站,于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
以前没有 ajax 技术的时候,web 页面从服务端整体渲染出 html 输出到浏览器端进行渲染,同样的,用户的一个改变页面的操作也会刷新整个页面来完成。直到有了 ajax 出现,实现页面局部刷新,带来的高效和分离让 web 开发者们惊叹不已。但随之而来的问题是,复杂的用户交互及展现需要通过大量的 DOM 操作来完成,这让页面的性能以及开发的效率又出现了新的瓶颈。
时至今日,谈到前端性能优化,减少 DOM 元素、减少 reflow 和 repaint、编码过程中尽量减少 DOM 的查询等手段是大家耳熟能详的。而页面任何UI的变化都是通过整体刷新来完成的。幸运的是,React 通过自己实现的 DOM Diff 算法,计算出虚拟页面当前版本和新版本之间的差异,最小化重绘,避免不必要的 DOM 操作,解决了这两个公认的前端性能瓶颈,实现高效 DOM 渲染。
我们知道,频繁的操作 DOM 所带来的性能消耗是很大的,而 React 之所以快,是因为它不直接操作 DOM,而是引进虚拟 DOM 的实现来解决这个问题
对于页面的更新,React 通过自己实现的 DOM Diff 算法来进行差异对比、差异更新,反映到页面上就是只重绘了更新的部分,从而提高渲染效率。
备注:以下性能阐述参考自尤雨溪。
对于 React 的性能方面,想啰嗦几句:
1. React 从来没有说过 “React 比原生操作 DOM 快”。React 的基本思维模式是每次有变动就整个重新渲染整个应用。如果没有 Virtual DOM,简单来讲就是直接重置 innerHTML。
2. 在比较性能的时候,要分清楚初始渲染、小量数据更新、大量数据更新这些不同的场合。
3. 不要天真地以为 Virtual DOM 就是快,diff 不是免费的,Virtual DOM 真正的价值从来都不是性能,而是它