在React这股目前最热前端框架之风刮来之前，一直在Cocos2d-html5游戏和半路出家的Android应用的纠结，在项目一开始阶段，为了图省事（O(∩_∩)O~主要还是自我的懒惰），喜欢把各种场景和界面杂糅一起，对UI封装和组件的颗粒化做的一塌糊涂。幸运在迷茫时候遇到了React，它的虚拟DOM（Virtual DOM）、组件化的开发思路、以及在跨移动端解决方案（ReactNative）这些深深的吸引了我，下面来跟我一起领略ReactJS的风采吧~~

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

ReactJS官网地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react

<b>二、React的几个误区</b>

1、仅仅一个处理VIEW层的工具

  React不是一个完整的MVC框架，最多可以认为是MVC中的V（View）层，甚至React并不非常认可MVC开发模式；

  因此：没有办法单单依靠React来完成一个完整的动态应用

2、React不是一个新的模板语言

  React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。

<b>三、对ReactJS的认识及ReactJS的优点</b>

<b>1、ReactJS的背景和原理</b>
在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的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抛弃HTML，引入了虚拟DOM的概念，必要时候将他们渲染到真正的DOM上

如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化，而只需要根据数据刷新整个页面。换句话说，任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。

• ** 在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会。简单说，React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异，然后再决定如何最优地更新DOM。 **

上图分析：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React会产生以下情况：

1)、触发相应组件render方法
2)、重新构建新的虚拟DOM树
3)、将当前新的虚拟DOM树和上一次的旧树进行对比
4)、得到DOM结构的区别，计算出最小变化集，进行实际的浏览器DOM更新（批量更新）。

除了性能的考虑外，React引入虚拟DOM更重要的意义是提供了一种一致的开发方式来开发服务端应用、Web应用和手机端应用

因为有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容 渲染到不同的平台，而应用开发者，使用JavaScript就可以通吃各个平台了。

2、组件化
虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。就像生活中孩子喜欢用积木搭房子一样，每一个积木就是React中的组件，积木与积木之间可以互相嵌套，最终拼在一起组成了房子。

例1：
对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。

例2：
对于文章界面来说，整个UI包括了头部Header、内容区域Content以及底部的评论区域CommentList

四、ReactJS正式起航

1、React.render
React.render 是React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

React.render( <MessageBox/> , document.getElementById('app'), function(){
            console.log("渲染完成！");
        });

2、创建组件React.createClass
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

var MessageBox = React.createClass({
            render:function (){
                var submessage = [];
                for(var i=0; i<10; i++){
                    submessage.push( <Submessage key={i }/> );
                }
                return ( 
                    <div>
                        <h1>Hello World!</h1>
                        {submessage}
                    </div>
                )
            }
        });

        var Submessage = React.createClass({
            render: function (){
                return (
                    <div>
                        <h3>写代码很有意思</h3>
                        <Footer/>
                    </div>
                )
            }
        });

        var Footer = React.createClass({
            render: function (){
                return (
                    <small>因为我们再用代码创造</small>
                )
            }
        });

        React.render(<MessageBox/>, document.getElementById('app'), function (){
            console.log("渲染完成！");
        });

上面代码中，变量MessageBox和Submessage就是一个组件类。模板插入时，会自动生成MessageBox、Submessage的一个实例（下文的"组件"都指组件类的实例）。

注意：
1）所有组件类都必须有自己的render方法，用于输出组件。
2）组件类的第一个字母必须大写，否则会报错，比如MessageBox不能写成messageBox。
3）组件类只能包含一个顶层标签，否则也会报错。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如，就是MessageBox组件加入一个name属性，值为John。组件的属性可以在组件类的this.props对象上获取，比如name属性就可以通过this.props.name读取。

添加组件属性，有一个地方需要注意，就是class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是 JavaScript 的保留字。

3、this.props
react中主要有下面三种方法来传递属性
1）直接在组件中使用key/value的形式来指定属性:

var title = "你好世界（来自顶层的props）";

var messageBox = React.render(<MessageBox title={title}/>, document.getElementById('app'), function (){
            console.log("渲染完成！");
        });

可以看到，在自定义的MessageBox组件中，我们指定了一个titile的属性，在组件中，获取属性的方法如下代码：

var MessageBox = React.createClass({
            getInitialState: function(){
                return {
                    isVisble: true,
                    subMessages:[
                        '我会代码搬砖',
                        '以及花式搬砖',
                        '不说了，工头叫我回去搬砖了，，，，'
                    ]
                }
            },
            render:function (){
                
                return ( 
                    <div>
                        <h1>{this.props.title}</h1>
                        <Submessage messages={this.state.subMessages}/>
                    </div>
                )
            }
        });

2）使用延展属性为组件指定属性

<script type="text/jsx">  
    var ShowInfo = React.createClass({  
        render: function() {  
            return (  
                <div>Hello, {this.props.name}, 年龄为：{this.props.age}</div>  
            );  
        }  
    });  
    var props = {  
        name: 'Jack',  
        age: '34'  
    };  
    React.render(  
        <ShowInfo {...props}/>,  
        document.getElementById('container')  
    );  
</script>  

如果一个在组件上需要传递的属性比较多，例如Person对象的属性：name、age、height、weight等等属性特征要一步步传递下去，实在是太麻烦，延展属性这个ES6的特性就大放异彩了~~~~~
为了在ShowInfo组件中定义多个属性，我们首先定义了一个props对象，里面包含两个键值对，然后在标签中，用{...props}的方式为组件传递了这两个属性，这就是JSX中的延展属性，"..."成为延展操作符，这种方式可以很方便地为组件指定多个属性。

3）通过调用组件的setProps函数为组件指定属性
React.render()函数执行后，会返回代表组件的一个对象，通过调用这个对象的setProps函数，可以为其指定属性，如下代码：

<script type="text/jsx">  
    var HelloWorld = React.createClass({  
        render: function() {  
            return (  
                <div>Hello, {this.props.name}</div>  
            );  
        }  
    });  
    var instance = React.render(  
        <HelloWorld />,  
        document.getElementById('container')  
    );  
    instance.setProps({name: 'Jack'});  
</script>  

react官方认为，props应该是只读的，不应该被修改。因为 React 不能帮你检查属性类型（propTypes）。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。

<b>this.props.children：</b>
this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性。它表示组件的所有子节点

<script type="text/jsx">
        var MessageBox = React.createClass({
            getInitialState: function(){
                return {
                    isVisble: true
                }
            },
            render:function (){
                
                return ( 
                    <div>
                        <h1>{this.props.title}</h1>
                        <Submessage>
                            <p>第一名</p>
                            <p>第二名</p>
                            <p>第三名</p>
                            <p>第四名</p>
                        </Submessage>
                    </div>
                )
            }
        });

        var Submessage = React.createClass({
            getDefalutProps:function (){
                return {
                    message: ['默认的子消息']
                }
            },

            render: function (){
                var msgs = [];
                this.props.children.forEach(function (node, index){
                    msgs.push(
                        node
                    );
                });
                
                return (
                    <div>{msgs}</div>
                )
            }
        });

        var title = "this.props.children";

        var messageBox = React.render(<MessageBox title={title}/>, document.getElementById('app'), function (){
            console.log("渲染完成！");
        });


</script>

上面代码的NoteList组件有两个span子节点，它们都可以通过this.props.children读取。
这里需要注意，this.props.children的值有三种可能：
1）如果当前组件没有子节点，它就是undefined;
2）如果有一个子节点，数据类型是object；
3）如果有多个子节点，数据类型就是array。

所以，处理this.props.children的时候要小心。

4、this.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。

<script type="text/jsx">
        var ClickApp = React.createClass({
            getInitialState:function (){
                return {
                    clickCount: 0
                }
            },
            handleClick:function(){
                this.setState({
                    clickCount: this.state.clickCount+1
                })
            },
            render:function(){
                return (
                    <div>
                        <h2>点击下面按钮</h2>
                        <button onClick={this.handleClick}>点击我</button>
                        <p>你一共点击了：{this.state.clickCount}</p>
                    </div>
                )
            }
        })
    
        React.render(
            <ClickApp/>, document.getElementById('app')
        );

</script>

上面代码是一个ClickApp组件，它的getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。

由于this.props和this.state都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props表示那些一旦定义，就不再改变的特性，而this.state是会随着用户互动而产生变化的特性 。

5、组件的生命周期
简单地说，React Component通过其定义的几个函数来控制组件在生命周期的各个阶段的动作。

在ES6中，一个React组件是用一个class来表示的（具体可以参考官方文档）

// 定义一个TodoList的React组件，通过继承React.Component来实现
class TodoList extends React.Component {
  ...
}

这几个生命周期相关的函数有：

constructor(props, context)  //构造函数，在创建组件的时候调用一次。

void componentWillMount() // 在组件挂载之前调用一次。
//如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。

void componentDidMount() // 在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。

// props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps
//（不管props有没有更新，也不管父子组件之间有没有数据交换）
void componentWillReceiveProps(nextProps) 

// 组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。
// 默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，
// 可以在这里做判断，优化渲染效率。
bool shouldComponentUpdate(nextProps, nextState)

// shouldComponentUpdate返回true或者调用forceUpdate之后componentWillUpdate会被调用。
void componentWillUpdate(nextProps, nextState)

// 除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
void componentDidUpdate()

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。

// render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。记住，不要在render里面修改state。
ReactElement render()

// 组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。
void componentWillUnmount()

** 更新方式： **
在react中，触发render的有4条路径。
以下假设shouldComponentUpdate都是按照默认返回true的方式。
1）首次渲染Initial Render
2）调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）
3）父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）
4）调用this.forceUpdate

下面是我对React组件四条更新路径地总结：

注意，如果在shouldComponentUpdate里面返回false可以提前退出更新路径。

一个React组件生命周期的测试例子

var MessageBox = React.createClass({
            getInitialState: function(){
                console.log('getInitialState')
                return {
                    count: 0
                }
            },
            getDefaultProps:function(){
                console.log('getDefaultProps')
            },
            componentWillMount:function(){
            },
            componentDidMount:function(){
            },
            componentWillUnmount:function(){
            },
            //更新时才执行，页面加载时不会执行
            shouldComponentUpdate:function (nextProp, nextState){
                console.log('shouldComponentUpdate');
                
                if(nextState.count > 5){
                    return false;
                }
                return true;       //必需返回 true|false
            },
            componentWillUpdate:function (nextProp, nextState){
                console.log('componentWillUpdate');
            },
            componentDidUpdate: function(){
                console.log('componentDidUpdate');
            },
            killSelf:function(){
                React.unmountComponentAtNode(document.getElementById('app'));
            },
            doUpdate:function(){
                this.setState({
                    count: this.state.count + 1
                });
            },
            render:function (){
                console.log('渲染。。。');
                return ( 
                    <div>
                        <h1>计数：{this.state.count}</h1>
                        <button onClick={this.killSelf}>卸载掉这个组件</button>
                        <br/><br/>
                        <button onClick={this.doUpdate}>手动更新一下组件（包括子组件）</button>
                        <Submessage count={this.state.count}/>
                    </div>
                )
            }
        });

        var Submessage = React.createClass({
            componentWillReceiveProps:function (nextProp){
                console.log('子组件将要获得prop');
            },
            shouldComponentUpdate:function (nextProp, nextState){
                if(nextProp.count > 3){
                    return false;
                }
                return true;
            },
            render: function (){
                return (
                    <h3>当前计数是：{this.props.count}</h3>
                )
            }
        });

        var messageBox = React.render(<MessageBox/>, document.getElementById('app'), function (){
            console.log("渲染完成！");
        });

运行后的效果为：

Paste_Image.png

五、ES6八大特性
更多关于ES6的特性，请看下一个ES6分享

六、Webpack的配置
更多关于Webpack的配置详情，请看下一个Webpack配置详解