React初探 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> React初探

React初探

浏览:2679次出处信息

这段时间忙着写毕业小论文，但每天依然抽取一点时间研究前端方面的技术。这几天初识了React这门火热的技术，这门技术是前端领域的一次技术革新，它从新的角度来定义前端的开发方式。同时，基于React的React-native跨平台解决方案一天内就在GitHub上赢得5000+星，更是让React备受瞩目！下面，就让我们看看神奇的React吧。

Hello React

在谈一些React理论方面的知识之前，我们先看看React是怎么工作的，下面是官网上的Hello World!示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">
  <title>hello react</title>
</head>  
<body>  
  <div id="container"></div>

  <script src="../assets/react.min.js"></script>
  <script src="../assets/JSXTransformer.js"></script>
  <script type="text/jsx">
    React.render(
      <h1>Hello, world!</h1>,
      document.getElementById('container')
    );
  </script>
</body>  
</html>

上面的代码要注意这几个地方：

引入React的两个库文件：react.min.js和JSXTransformer.js。JSXTransformer.js作用是将JSX语法转换为JavaScript，语法转换比较耗时间，实际中转换工作交由服务器中完成(gulp-react或者react-tools)
最后一个script标签type属性为text/jsx，标识JSX语法。JSX基本语法规则：遇到 HTML 标签(以 < 开头)，就用 HTML 规则解析；遇到代码块(以 { 开头)，就用 JavaScript 规则解析
React.render将模板转换为HTML语言，并挂载到指定的标签下

React提倡组件化编程方式，先将代码封装成组件，然后插入到网页标签中，将上面的代码修改如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">
  <title>simple component</title>
</head>  
<body>  
  <div id="container"></div>
  <script src="../assets/react.min.js"></script>
  <script src="../assets/JSXTransformer.js"></script>
  <script type="text/jsx">
    var HelloMessage = React.createClass({
      render: function() {
        return <div>Hello {this.props.name}</div>;
      }
    });
    React.render(<HelloMessage name="John" />, document.getElementById('container'););
  </script>
</body>  
</html>

上面代码中，变量HelloMessage就是一个组件类。模板插入<HelloMessage />时，会自动生成HelloMessage的一个实例。所有组件类都必须有自己的 render方法，用于输出组件。利用this.props.xx读取父级传过来的对象，比如上面代码中name属性就可以通过this.props.name读取。

通过上述的Hello World示例，是不是发现只需了解很少的概念就可以进行简单的React开发，当然前提是你必须了解JavaScript和DOM等前端基础知识。

优势

了解了React的基本使用方式，下面让我们看看React的优点到底是什么？为什么React会这么受欢迎。

入门简单

从上面的示例就可以看出，入门React需要了解概念不是很多。敲完官网上的例子，自己写一个小组件并不是很困难。不像Angular这样重型的框架，我们需要了解：MVVM、数据双向绑定、依赖注入等等的概念。这里并不是比较React和Angular，毕竟这俩不是解决一个level上的技术

兼容性

React是一个View层的library，其可以兼容到IE8，是不是很赞！其实，这主要得益于虚拟DOM实现的一套自身接口

前后端统一、SEO友好

基于React开发出的代码，可以同时运行于server side以及client side。Angular.js在开发webapp时会配合大量后端提供的数据接口从而达到动态、异步填充的特性，客户端渲染速度确实会快，体验也会更好，但同时也导致了互联网爬虫无法正确地检索到页面的真实数据而只能爬取到一些模板字段。开发者为了解决这个问题，通常情况下会在server端重写一套渲染逻辑专门供爬虫检索。而使用React的话则可以一定程度上改善这个问题，比如Express上就有一款视图引擎express-react-views可以实现服务端渲染React组件。

虚拟DOM

虚拟DOM应该是让开发者最兴奋的革新技术了！因为它大大的提高了网页性能。

现有的前端体系中，碍于文件对象模型的树形实现，我们不得不面临一个现状，就是：JS很快，但DOM太慢。React为了解决这个问题在现有的两层模型中额外引入了一个过渡层，在浏览器端用JavaScript实现了一套DOM API，即：虚拟DOM。

普通的操作模型：

normal-dom

React的操作模型：

react-dom

基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新，这种算法叫DOM diff。

React能够批处理虚拟DOM的刷新，在一个事件循环(Event Loop)内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

组件化

虚拟DOM不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。组件化是前端的开发趋势之一！React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。

结语

通过这几天的调研，我觉得React真的是一门很有前景的技术！当然，处于新生儿的React目前也有很多不足的地方，比如：react基础文件压缩后还有118KB，比较臃肿；组件化编写方式跟以往的前端开发模式差别比较大，开发者需要适应新的开发方式；React把HTML代码写到了JavaScript代码里面，令开发者感到非常捉急……一项技术好不好，需要用时间来考验。自己在GitHub针对React建了个代码仓库，欢迎学习和讨论！

参考

React’s diff algorithm
React Demystified
React 入门实例教程
颠覆式前端UI开发框架：React

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：用 JS 复制艺术

后一篇：JavaScript 中的相等检测 >>

文章信息

作者：chenjun 来源：风影博客
标签： React
发布时间：2015-06-02 13:18:39

建议继续学习

近3天十大热文