【黑科技】React-canvas助力HTML5

1、什么是流畅的用户体验？

游戏的开发界有一个理论，就是当动画或者交互响应达到60FPS(60帧每秒)的时候，就可以定义为流畅，按此理论，那么每帧里所有操作必须在16ms完成。要想提高页面的用户体验，必须在性能上下功夫。最早做动画都是用 setTimeout来实现的，而 setTimeout的处理回调的时间精度都在 16ms 左右。所以，可以想象正常用页面这两个函数就已经 16 ms了，再加上reflow/repaint/compositing 卡顿或跳帧就是家常便饭了。不过还好的是w3c 标准和各浏览器厂商较早就支持了动画接口 RAF（RequestAnimationFrame 函数）来处理动画帧回调。解决了上述 setTimeout不足的问题。但是，另一个问题仍然没解决，当浏览器打开网页时，需要解析文档，在内存中生成DOM结构，如果遇到复杂的文档，这个过程是很慢的。如果遇上低端的手机浏览器，可以想象一下，如果网页上有上万个形状（不管是图片或CSS），生成DOM需要多久？更不要提与其中某一个形状互动了。

2、React是什么？

用户与浏览器互动，从技术上看就是用户在操作DOM，所有的DOM操作都是同步的，会堵塞浏览器。JavaScript操作DOM时，必须等前一个操作结束，才能执行后一个操作。只要一个操作有卡顿，整个网页就会短暂失去响应。浏览器重绘网页的频率是60FPS，JavaScript做不到在16毫秒内完成DOM操作，因此产生了跳帧。用户体验上的不流畅、不连贯就源于此。JavaScript语言运行效率本身很快，但是DOM太慢了，DOM拖慢JavaScript。为了解决这个问题，React出现了，React是 Facebook 推出的一个用来构建用户界面的 JavaScript 开源框架，React的最引人注目的特征就是引入了虚拟DOM（Virtual DOM）这个概念，在浏览器端用JavaScript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当用户界面需要变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。React实现了代码最小化参与DOM操作的方法，大大提升了浏览器的性能。

3、Canvas是什么？

Canvas 是 HTML5 的画布元素，也一个原生的DOM 元素。它相当于一个“白板”，我们可以通过javascript在这块白板上增加文字与图像，“绘制”一些可视内容。目前大多数H5游戏和动画特效都是用canvas实现的。很多在微信里传播的小游戏和小应用，也是用canvas实现的。用canvas的话整个页面只用一个DOM 元素，并且浏览器只需要绘制一次形成一幅图。这大大降低了DOM 数量与渲染的复杂度。更好的是，canvas默认支持GPU硬件加速的，可以将原来 CPU 密集型操作变成 GPU 操作。提高了动画的流畅度。值得一提的是，微信浏览器的内核，也即是QQ浏览器 X5 内核已经内置了很多游戏引擎（比如白鹭游戏引擎与cocos2dx），供开发者开发canvas游戏，所以长时间来看，微信浏览器的画布性能将会越来越强大。

4、新的方法

大多数现代移动设备都拥有硬件加速的 canvas，我们为什么不利用起来呢？HTML5 游戏已经做到了。我们为什么不采用游戏的思路设计界面，在 canvas 上开发应用界面么，用canvas来渲染页面呢？相信你已经想到了，但是有人已经做到了，那就是Flipboard公司的React-canvas。React-canvas是什么呢？光看名字就知道这是跟react和canvas相关的。React-canvas，可以使我们用react技术渲染canvas。

5、React-canvas入门

React Canvas 是依赖于React的一个组件，它拥有了渲染到canvas的能力，它可以让我们脱离繁琐的canvas命令式绘图，使用简单的css布局(Layout)。接下来给大家演示一个简单的图文实现。

5.1.安装node

新时代的前端开发离不开node环境，所以，react-canvas也不例外，node安装的具体步骤不再赘述。记住，Node版本不低于4.0。

5.2创建项目空间

在D:\nodejs\reactdemo创建文件夹，此为开发的根目录 打开到此目录，切换到命令行，执行 npm init，默认回车，初始化package.json

5.3安装框架和插件

需要在node环境上安装一系列框架 切换到命令行， 执行

npm install react
复制代码

安装基础框架react（注&#x