react.js简单介绍

React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库，

React 术语

React Elements

代表 HTML 元素的 JavaScript 对象。 这些 JavaScript 对象最后被编译成对应的 HTML 元素。

Components

封装 React Elements， 包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块，例如 分页，侧栏导航等。

JSX

JSX 是 React 定义的一种 JavaScript 语法扩展，类似于 XML 。 JSX 是可选的， 我们完全可以使用 JavaScript 来编写 React 应用， 不过 JSX 提供了一套更为简便的方式来写 React 应用。

Virtual DOM

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI， 同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。

React 主要的目标是提供一套不同的, 高效的方案来更新 DOM.不是通过直接把 DOM 变成可变的数据, 而是通过构建 "Virtual DOM", 虚拟的 DOM,随后 React 处理真实的 DOM 上的更新来进行模拟相应的更新。引入额外的一个层怎么就更快了呢?那不是意味着浏览器的 DOM 操作不是最优的, 如果在上边加上一层能让整体变快的话?是有这个意思, 只不过 virtual DOM 在语义上和真实的 DOM 有所差别.最主要的是, virtual DOM 的操作, 不保证马上就会产生真实的效果.这样就使得 React 能够等到事件循环的结尾, 而在之前完全不用操作真实的 DOM.在这基础上, React 计算出几乎最小的 diff, 以最小的步骤将 diff 作用到真实的 DOM 上.批量处理 DOM 操作和作用最少的 diff 是应用自身都能做到的.任何应用做了这个, 都能变得跟 React 一样地高效.但人工处理出来非常繁琐, 而且容易出错. React 可以替你做到.

前面提到 virtual DOM 和真实的 DOM 有着不用的语义, 但同时也有明显不同的 API.DOM 树上的节点被称为元素, 而 virtual DOM 是完全不同的抽象, 叫做 components.component 的使用在 React 里极为重要, 因为 components 的存在让计算 DOM diff 更高效.

简单的例子——Hello World

React Component 抽象出相同 UI 组件的结构和逻辑。 通过调用React.createClass方法来创建一个 Component，并传入一个带有render方法的对象类型的参数。

var HelloMessage = React.createClass({ render: function() {

return

<div>Hello {this.props.name}</div>;

 }

 });

 React.renderComponent(<HelloMessage name="john"/>

, mountNode);

这个例子创建了 React component classHelloMessage,然后创建了一个 virtual DOM, 包含 component(HelloMessages) 本质是是HelloMessage class 的一个实例,并挂载到真实的 DOM 元素里的一个节点.

在这里，可以看到有一个特殊的引用：this.props.name。 这个引用称之为Props，可以将他想象成 Component 的设置选项，在使用上，Props类似于 HTML 中的属性。需要注意的是， Props 仅用来定制 Component， 这些数据不应该被改动。 如果涉及到需要做改动的数据， 得考虑使用state。State 数据代表 Component 的状态， 用于维护 Component 内部的状态。 当 State 发生改变之后， React 将会重新渲染 UI 。调用 与Props类似， State 数据通过this.state访问。

component 的渲染通过render()函数定义.React 没有明确说明什么时候或者多频繁他会去调用render(),只是会尽量调用, 使得正确的界面更新能看清.render()方法返回的内容, 表示了浏览器里真实的 DOM 看起来应该怎样.