你的位置:首页 > 软件开发 > 网页设计 > React Canvas:高性能渲染 React 组

React Canvas:高性能渲染 React 组

发布时间:2015-03-10 10:01:54
React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验。React Canvas 提供了一组标准的 React 组件,由基于的渲染元素抽象而成。 GitHub ...

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

 

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='/images/loading.gif' data-original='...' />    <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  }; }});

原标题:React Canvas:高性能渲染 React 组

关键词:react

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录