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 组件

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