浏览 15659 次
|
锁定老帖子 主题：React初探
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2013-06-03
近日，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或者查看其官网吧！也可以说哪儿网（www.shuonar.com）阅读。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
