代码改变世界

React初探

2013-06-03 09:11  Justany_WhiteSnow  阅读(9169)  评论(5)  编辑  收藏  举报

近日，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或者查看其官网吧！