React初探

wyqj

浏览: 84414 次

最近访客更多访客>>

贫僧稽首了

likunran521

wxn_yxm

yangyi336

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

我的技术资料收集

资料收集

原帖地址：http://www.cnblogs.com/justany/archive/2013/06/03/3111634.html

近日，facebook将其用户界面构建Javascript库React开源发布。

等等……什么叫用户界面构建库（a library for building user interfaces）？

顾名思义，当然就是该库是将特定规范的源代码（JSX），构建成新的代码（Javascript）。

为什么我们需要这么做呢？

我们觉得写CSS太麻烦了，太多重复工作了，所以我们使用LESS来代替他，让机器代替我们做这些事情。但是出于性能的需求，现在并不流行加载一个less.js让其动态处理这些LESS代码，而是转为先由LESS文件构建成静态的CSS文件，再使用，就像Bootstrap一样。

OK，回到React，我们发现Javaascript模板虽然能动态的生成我们想要的东东，但是实际上对性能并不友善，所以我们寻求一种方法让其构建成静态的，然后再使用。

当然，React不仅仅做了这些，下面让我们一起来认识React吧！

简单的例子——Hello World

首先，我们点击下面链接下载其Starter Kit。

Download Starter Kit 0.3.1

然后在其根目录下创建一个HTML文件helloworld.html，键入以下代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.min.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
/** @jsx React.DOM */
      React.renderComponent(
<h1>Hello, world!</h1>,
        document.getElementById('example')
      );
</script>
  </body>
</html>

什么，这是什么代码，为什么能这么写？

/** @jsx React.DOM */
React.renderComponent(
// 这是什么不是字符串，不是数字，又不是变量的参数……WTF
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

因为这个script标签的type为
type="text/jsx"
所以实际上，这里面的代码并没有运行……

这里面的奥秘在于该HTML引用了JSXTransformer.js和react.min.js。首先，JSXTransformer.js将所有text/jsx类型的script当成字符串读取出来，再分析其代码，转换成适用于react.min.js的UI模块。

可见这样效率当然是很低的，但是React提供了另一种方法，不用说，就是本地构建成静态代码。通过npm我们可以安装react-tools：

npm install -g react-tools

于是我们就可以用react-tools的watch命令来监控目录变化并进行构建：

jsx --watch src/ build/

所以实际项目上的代码应当是这样的：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.min.js"></script>
    <!-- 不需要 JSXTransformer! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

我们看看经过构建后helloworld.js变成怎么样了：

/** @jsx React.DOM */
React.renderComponent(
  React.DOM.h1(null, 'Hello, world!'),
  document.getElementyById('example')
);

这里有一个值得学习的地方，就是React在对DOM插入时候做的性能优化。JavaScript Micro-Templating一般是使用innerHTML进行插入操作的，但是React并非如此，其静态生成的代码是使用Document Fragment的方法插入的。这里有一个性能测试，可以看出这两者的性能差别：

http://jsperf.com/innertext-vs-fragment

我们可以看见使用Document Fragment的性能是优于innerHTML的，作为Facebook的类似模板解决方案，其对性能有更强的要求。

下一步？

如果想更进一步了解React，那么请查看Starter Kit中的examples或者查看其官网吧！

本文链接

分享到：

Windows phone 8 学习笔记(3) 通信 | FCL中三个定时器的区别

2013-06-03 10:02
浏览 707
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

React初探

简单的例子——Hello World

下一步？

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

React初探

简单的例子——Hello World

下一步？

评论

发表评论

相关推荐

C#WebBrowser控件使用教程与技巧收集--苏飞收集 - sufeinet

我要喷一个自认为很垃圾的网站架构 - 老赵【苏州】

[翻译] Oracle Database 12c 新特性Multitenant - Cheney Shue

memcahd 命令操作详解 - 阿正-WEB

面向过程的代码符合大众的思维方式吗？ - 史蒂芬.王

面向过程的代码符合大众的思维方式吗？ - 史蒂芬.王

RPG游戏之组队测试 - zthua

IT人们给个建议 - SOUTHER

Java向前引用容易出错的地方 - 银河使者

使用Func<T1, T2, TResult> 委托返回匿名对象 - 灰身

【web前端面试题整理03】来看一点CSS相关的吧 - 叶小钗

Windows 8 动手实验系列教程 实验6：设置和首选项 - zigzagPath

闲聊可穿戴设备 - shawn.xie

CentOS下Mysql安装教程 - 小学徒V

vmware安装ubuntu12.04嵌套安装xen server（实现嵌套虚拟化） - skyme

之前专门为IE6、7开发的网站如何迁移到IE10及可能遇到的问题和相应解决方案汇总 - 海之澜

Android学习笔记--解析XML之SAX - 承香墨影

SQL Server 性能优化之——T-SQL TVF和标量函数

Nginx学习笔记（二） Nginx--connection&request

从郭美美霸气侧漏看项目管理之项目经理防身术

最近访客更多访客>>

Windows 8 动手实验系列教程实验6：设置和首选项 - zigzagPath