React初探
近日,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。
然后在其根目录下创建一个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或者查看其官网吧!