React Canvas：高性能渲染 React 组

　　React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力，替代传统的 DOM 渲染，具有更接近 Native App 的使用体验。React Canvas 提供了一组标准的 React 组件，由基于的渲染元素抽象而成。

 

 

 

GitHub      源码下载

　

示例代码：

var React = require('react');
var ReactCanvas = require('react-canvas');var Surface = ReactCanvas.Surface;
var Image = ReactCanvas.Image;
var Text = ReactCanvas.Text;var MyComponent = React.createClass({render: function () {var surfaceWidth = window.innerWidth;var surfaceHeight = window.innerHeight;var imageStyle = this.getImageStyle();var textStyle = this.getTextStyle();return (<Surface width={surfaceWidth} height={surfaceHeight} left={0} top={0}><Image style={imageStyle} src='...' /><Text style={textStyle}>Here is some text below an image.</Text></Surface>);},getImageHeight: function () {return Math.round(window.innerHeight / 2);},getImageStyle: function () {return {top: 0,left: 0,width: window.innerWidth,height: this.getImageHeight()};},getTextStyle: function () {return {top: this.getImageHeight() + 10,left: 0,width: window.innerWidth,height: 20,lineHeight: 20,fontSize: 12};}});

　　

您可能感兴趣的相关文章

• 网站开发中很有用的 jQuery 效果【附源码】
• 分享35个让人惊讶的 CSS3 动画效果演示
• 十分惊艳的8个 HTML5 & JavaScript 特效
• Web 开发中很实用的10个效果【源码下载】
• 12款经典的白富美型 jQuery 图片轮播插件

 

本文链接：React Canvas：高性能渲染 React 组件

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源