浅谈React编程思想-蒲公英云

React是Facebook推出的面向视图层开发的一个框架，用于解决大型应用，包括如何很好地管理DOM结构，是构建大型，快速Web app的首选方式。

React使用JavaScript来构建用户界面，因此可以说是一个用来构建用户界面的JavaScript库。

1、为什么使用 React？

React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。

1）简单：仅仅只要表达出应用程序在任一个时间点应该呈现的样子，当底层的数据变了，React会自动处理所有用户界面的更新。

2）声明式：数据变化后，与点击“刷新”按钮类似，但仅会更新变化的部分。

3）构建可组合的组件：React构建可复用的组件，事实上通过React唯一要做的事情就是构建组件，这得益于其良好的封装性，组件使代码复用、测试和关注分离更加简单。

2、对React认识的误区

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

2) React和Web Component不能相提并论，两者并不是完全的竞争关系，完全可以用React去开发一个真正的Web Component；

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

3、React的原理

在Web开发中，总需要将变化的数据实时反应到用户界面上，这就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因。

React为此引入了虚拟DOM的机制：在浏览器端用JavaScript实现一套DOM API。基于React，所有的DOM操作都通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后将目前的整个DOM树和上次的DOM树进行对比，得到DOM树的区别，仅仅将变化的部分进行浏览器DOM更新。尽管每一次都要重新完整的虚拟DOM树，但因为虚拟DOM是内存数据，性能极高，而对实际DOM操作的仅仅是Diff部分，因此能达到提高性能的目的。此外，React能批处理虚拟DOM的刷新，在一个事件循环内的两次数据变化会被合并，如连续的先将节点内容从x变成y，然后又从y变成x，React会认为UI不发生任何变化。总之，在保证性能的同时，开发者将不再需要关注数据的变化如何更新到实际的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何render的，每做一点界面的更新，都可以认为刷新了整个页面，至于如何进行局部更新以保证性能，则是React框架要完成的事情。

以视频聊天应用为例：当收到一条新消息时，传统的开发过程需要知道是哪条数据，如何将新的DOM结点添加到当前DOM树上；而基于React，永远只需要关心数据整体，两次数据之间的UI如何变化，然后可以完全交给React框架去做，这大大降低了逻辑复杂性和开发难度，产生Bug的概率也更小。

有关虚拟DOM的详细介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/71171567

4、组件化

React以组件的方式去重新思考用户界面的构成，将用户界面上每一个功能相对独立的模块定义成组件，然后将小组件通过组合或嵌套的方式构成大组件，最终完成整体UI的构建。

MVC开发模式的思想：将模型—视图—控制器定义成不同的类，实现表现，数据，控制的分离。

组件化开发模式的思想：用户界面功能模块间的分离，完全是一个新思路，从功能的角度出发，将用户界面分成不同的组件，每个组件都独立封装。

1) 组件的特征：

①　可组合：一个组件可以包含其它组件，也可以嵌套在另一个组件内部。也就是说，一个复杂的UI可以拆分成多个简单的UI组件；

②　可重用：每个组件都是具有独立功能的，可用于多个场景；

③　可维护：每个小组件仅包含自身的逻辑，更容易被维护。

2) 组件的属性：

①　组件名称首字母必须大写；

②　变量名用{}包裹，不能加双引号；

③　获取属性的值：this.props.属性名；

④　为元素添加css的class：className；

⑤　设置组件的style属性：style={ {width: this.state.witdh}}。

3) 组件的状态

React的一大创新，是将组件看成一个状态机。

①　设置一个初始状态：getInitialState()，注意：getInitialState()函数必须有返回值，可以是NULL或一个对象；

②　访问状态属性的值：this.state.属性名；

③　更新状态，触发重新渲染用户界面：this.setState()。

4) 组件的生命周期

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

①　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)：组件判断是否重新渲染时调用

有关组件的生命周期的详细介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/71172783

5) 组件的嵌套

React是基于组件化的开发，组件化开发最大的优点是复用。实现复用的方式之一便是组件嵌套。

var MyBox = React.createClass({
    render: function() {
        return (
            <div>
                用户名：<Input type="text"></Input><br/>
                密码：<Input type="password"></Input>
            </div>
        );
    }
});
var Input = React.createClass({
    render: function() {
        return (
            <input type={this.props.type} />
        );
    }
});
ReactDOM.render(  
    <MyBox />, 
       document.getElementById('content')  
);

5、JSX语法

HTML直接写在JavaScript中，不加任何引号，就是JSX的语法，允许HTML与JavaScript的混写。

JSX允许直接在模板插 JavaScript变量。如果该变量是一个数组（直接的JavaScript数组或通过map()、filter()等返回的数组），则会展开数组的所有元素。

1) 直接的JavaScript数组：

var arr = [
    <p key="1">Alice</p>,
    <p key="2">Bruce</p>
];
ReactDOM.render(  
    <div>{arr}</div>,  
       document.getElementById('content')
);

2) 通过map()返回的数组：

var arr = ['Alice','Bruce'];
ReactDOM.render(  
    <div>
    {
        arr.map(function(item, index) {
            return <p key={index}>{item}</p>
        })
    }
    </div>,  
       document.getElementById('content')  
);

6、显示数据

React让显示数据变得简单，当数据变化时，用户界面会自动同步更新。可以认为React组件就是简单的函数，接受 props 和 state作为参数，然后渲染出HTML。

var HelloWorld = React.createClass({  
    render: function() {  
        return (  
            <div>  
                <input type="text" placeholder="Please enter your name!" />  
                {this.props.date.toString()}  
            </div>  
        );  
    }  
});  
setInterval(function() {  
    ReactDOM.render(  
           <HelloWorld date={new Date()} />,  
        document.getElementById('timeBox')  
    );  
}, 1000);