共计 3267 个字符，预计需要花费 9 分钟才能阅读完成。
React 介绍
React 是 Facrbook 内部的一个 JavaScript 类库并开源，可用于创建 Web 用户交互界面。它引入了一种新的方式来处理浏览器 DOM。那些需要手动更新 DOM、费力地记录每一个状态的日子一去不复返。React 使用很新颖的方式解决了这些问题。你只需要声明地定义各个时间点的用户界面，而无序关系在数据变化时，需要更新哪一部分 DOM。在任何时间点，React 都能以最小的 DOM 修改来更新整个应用程序。
React 主要有四个主要概念构成，下面分别来简单介绍一下
Virtual DOM
之所以引入虚拟 DOM，一方面是性能的考虑。Web 应用和网站不同，一个 Web 应用 中通常会在单页内有大量的 DOM 操作，而这些 DOM 操作很慢
在 React 中，应用程序在虚拟 DOM 上操作，这让 React 有了优化的机会。简单说，React 在每次需要渲染时，会先比较当前 DOM 内容和待渲染内容的差异，然后再决定如何最优地更新 DOM
除了性能的考虑，React 引入虚拟 DOM 更重要的意义是提供了一种一致的开发方式来开发服务端应用、Web 应用和手机端应用
因为有了虚拟 DOM 这一层，所以通过配备不同的渲染器，就可以将虚拟 DOM 的内容 渲染到不同的平台。而应用开发者，使用 JavaScript 就可以通吃各个平台了。相当棒的思路！且虚拟 DOM 是内存数据，性能是极高的，而对实际 DOM 进行操作的仅仅是 Diff 部分，因而能达到提高性能的目的
React 组件
对于 React 而言，则完全是一个新的思路，开发者从功能的角度出发，将 UI 分成不同的组件，每个组件都独立封装。在 React 中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个 UI 是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。
组件化开发特性:
React 认为一个组件应该具有如下特征：
1. 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的 UI 可以拆分成多个简单的 UI 组件；
2. 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个 UI 场景；
3. 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；
4. 可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个 UI 进行测试容易的多。
组件定义
在 React 中定义一个组件也是相当的容易，组件就是一个 实现预定义接口的 JavaScript 类：
组件渲染
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘example’)
);
而这个方法，必须而且只能返回一个有效的 React 元素。这意味着，如果你的组件是由多个元素构成的，那么你必须在外边包一个顶层 元素，然后返回这个顶层元素。比如我们创建一个布局组件：
render:function(){
return React.createElement(
“div”,null,
React.createElement(“div”,null,”header”),
React.createElement(“div”,null,”content”),
React.createElement(“div”,null,”footer”)
);
}
ES5 方式定义组件
“use strict”;
var HelloMessage = React.createClass({
displayName: “HelloMessage”,
render: function render() {
return React.createElement(
“div”,
null,
“Hello “,
this.props.name
);
}
});
ES6 方式定义组件
import ‘./Hello.css’;
import ‘./Hello.scss’;
import React, {Component} from ‘react’;
// 内联样式
let style={
backgroundColor:’blue’
}
export default class Hello extends Component {
constructor(props) {
super(props);
this.state = {count: ‘es6’};
}
render() {
return (
<div>
<h1 style={style}>Hello world{this.state.count}</h1>
<br/>
<image/>
</div>
)
}
}
JSX 方式定义组件
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name=”John” />, mountNode);
Jsx 语法
什么是 jsx
在用 React 写组件的时候，通常会用到 JSX 语法，粗看上去，像是在 Javascript 代码里直接写起了 XML 标签，实质上这只是一个语法糖，每一个 XML 标签都会被 JSX 转换工具转换成纯 Javascript 代码，当然你想直接使用纯 Javascript 代码写也是可以的，只是利用 JSX，组件的结构和组件之间的关系看上去更加清晰
Jsx 语法使用
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
var names = [‘Alice’, ‘Emily’, ‘Kate’];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById(‘example’)
);
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 {开头），就用 JavaScript 规则解析。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById(‘example’)
);
上面代码的 arr 变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。
Data Flow（单向数据流）
单向数据流
先来了解一下 Flux 的核心“单向数据流“怎么运作的：Action -> Dispatcher -> Store -> View 更多时候 View 会通过用户交互触发 Action，所以一个简单完整的数据流类似这样：
整个流程如下：
1. 首先要有 action，通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher2.View 层通过用户交互（比如 onClick）会触发 Action3.Dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数 4.Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了 5.View 会监听这个 change 事件，拿到对应的新数据并调用 setState 更新组件 UI 所有的状态都由 Store 来维护，通过 Action 传递数据，构成了如上所述的单向数据流循环，所以应用中的各部分分工就相当明确，高度解耦了。这种单向数据流使得整个系统都是透明可预测的。
