React初探

React简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。查看github

react

对ReactJS的认识及ReactJS的优点

1、ReactJS的背景和原理

Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在Web开发中，我们需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

由此我们可以看出，React的神奇之处就在于它的Virtual DOM 及 Diff算法，基于Virtual DOM，我们几乎可以忽略性能问题儿无所顾忌地刷新页面，虚拟DOM机制能确保只会对页面上真正有变化的部分进行实际的DOM操作，而不会像传统的html一样修改整个DOM树。关于React的Diff算法，一张图片可以简单的解释：

diff算法

React组件会有key属性，在虚拟DOM里React会对比相同Key的组件，对有更新的组件进行变更。我们可以查看Diff算法示例。也就是说，与传统HTML开发不同，react只需要关注数据的整体变化而不需要数据变化产生的UI变化，对DOM的修改只需要交给框架，这样就大大降低了逻辑的复杂度，降低了开发难度。

2、组件化

react的另一个特点就是组件化，把每一个UI单元封装成组建的形式，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。组件化的思考方式不同于MVC的表现、控制、模型分离，React更关注的是View层，它将View层的UI按功能分成不同的组件，每个组件都是独立的。
react组件有以下特点：

(1)可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；

(2)可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；

(3)可维护（MAINTAINABLE）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

拥有这些特点，所以ReactUI组件间的耦合性非常低。

hello world && React前奏

React的使用环境非常简单，只需要下载ReactJs,解压后得到js文件，引入我们的html就ok。

Hello World

上图就是一个最简单的React实例，在浏览器页面输出'Hello,world!'字样；

上面的代码除了引进react库外，还有一些是需要注意的：

• 最后一个<seript>的标签的type属性为text/babel。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" ，当然，React并不要求一定要用jsx语法，也可以直接使用js编写。

• 引进的三个库必须是首先加载的，其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。通过react-tools的jsx --watch src/ build/命令即可把JSX语法转换为原生js。

//jsx语法
ReactDOM.render(

    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );

//转换后的js语法
ReactDOM.render(

    React.createElement("h1", null, "Hello, world!"),
    document.getElementById('example')
  );

开始编写React：

相当于main()函数的ReactDOM.render方法：

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
这里需要注意的是，react并不依赖jQuery，当然我们可以使用jQuery，但是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。

JSX语法

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。简单的说，HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写，遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析，React 可以用来做简单的 JSX 句法转换。它能定义简洁且我们熟知的包含属性的树状结构语法。

jsx里既可以包含HTML标签也可以包含React组建，区别在于，渲染 HTML 标签，要在 JSX 里使用小写字母开头的标签名，渲染React组建，需要大写字母开头的本地变量；

JSX

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。
作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

JSX 把类 XML 的语法转成纯粹 JavaScript，XML 元素、属性和子节点被转换成 React.createElement 的参数。

var Nav;
// 输入 (JSX):
var app = <Nav color="blue" />;
// 输出 (JS):
var app = React.createElement(Nav, {color:"blue"});

ReactJS组件

####### 组建属性
既然ReactJS是基于组件化的开发，所以React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

第一个组件：

组件案例

这段代码里有几点需要注意：

1）获取属性的值用的是this.props.属性名

2）创建的组件名称首字母必须大写。

3）为元素添加css的class时，要用className。

4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

####### 组建状态
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：

状态

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

####### 组件的生命周期
组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

组件生命周期

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

另外，组件的style属性的设置方式也值得注意，不能写成

style="opacity:{this.state.opacity};"

而要写成

style={{opacity: this.state.opacity}}

这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

####### 组件的嵌套
React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用，下面我们来看看React中到底是如何实现组件的复用的，这里我们还写一个例子来说吧，代码如下：

组件嵌套 响应结果