React的初识

*React

React 是Facebook开发的一款JS库

1. 为什么开发一个react呢？
Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。（抛出来个砖---->react是单向数据流）
2. 被动更新非常简单
当组件第一次初始化时，render方法被调用，为视图生成一个轻量级的表现。通过这个表现，产生一个标签字符串，然后插入到文档中。当数据变化时，render方法再次被调用。为了尽可能有效的完成更新，我们比较之前调用render返回的值与新的值，然后产生一个最小限度的变更去应用到DOM中。
（这个render很重要）
3. 我们再来说说为什么react这么火
第一 React是以降低前端开发的复杂度为原则的。使用React编写的代码也易于理解，所以适合大规模多人开发，能提高项目的开发效率和质量。
第二 虚拟DOM
在JavaScript中DOM操作是独立成为一个分支的。各浏览器在实现DOM操作库也是大同小异，都是在单独的模块中实现了DOM操作，由于各种技术上的原因，DOM操作的性能损耗相对于其他操作是很大的。在前端开发中都是需要特别尽量保持较小的DOM操作次数来提高性能。
React作为一个UI框架，不可避免要有界面上元素的交互。为了提高性能，React在操作页面交互时引入了虚拟DOM的概念。虚拟DOM是在React中用JavaScript重新实现的一个DOM模型，和原生的DOM并没有多少关系，只是借鉴了原生DOM的一些概念。虚拟DOM并没有完全实现DOM，只是保留了元素直接的层级关系和少量必要的属性。因为减少了不必要的复杂性，实践校验的结果是虚拟DOM的性能比原生DOM高很多。来看看普通DOM和虚拟DOM在代码上的差别。
第三 JSX
JSX是React的重要组成部分，他使用类似XML标记的方式来声明界面及关系，所以他只是一个文档规范。如下是一个在React里面使用JSX的例子：

 return (<li className={isEdit?"editing":""}>
                    <div className={"todo "+(done?"done":'')}>
                        <div className="display">
                            <input className="check" type="checkbox" checked={done} onChange={this.doneHandler}/>
                            <div className="todo-content" onDoubleClick={this.editHandler}>{val}</div>
                            <span className="todo-destroy" onClick={this.removeHandler}></span>
                        </div>
                        <div className="edit">
                            <input className="todo-input" type="text" value={val} 
                            ref={this.editInput}
                            onChange={this.editTodoHandler}
                            onBlur={this.pushHandler}
                            />
                        </div>
                    </div>
                 </li>)

打眼一看是HTML语法，实则是有着许多差异，举个例子：HTML ===> class  然而JSX ===> className,
虽然JSX中用class也会编译出来，**但是为了避免不必要的报错以及尊重规范，我们还是要跟着规则走**
像是这种差别我们不用特意去记，用着用着就熟练了，**下一篇我们将进行React的初体验**