React初探

shenyuc629

浏览: 195471 次
性别:
来自: 成都

最近访客更多访客>>

Michael_ketty

wxd2228437723

hxs15050576

ssamtea

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

react js

近日，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>
    
</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或者查看其官网吧！也可以到说哪儿网（www.shuonar.com）阅读。

分享到：