React简介
React首次被提出是在2014年的f8大会（f8是由facebook组织的一个年度的技术峰会，目标听众是从事web周边产品和服务的开发者和企业）上，当期的主题叫做 Rethinking Web App Development at Facebook，所以可以这样定义React：颠覆式前端UI开发框架。
我们都知道基于html的前端界面开发正变得越来越复杂，传统的开发方式在解决将来自于服务器或者用户输入的交互数据，动态反应到复杂界面上的时候，代码量变得越来越大，越来越难以维护，常常力不从心。基于此，先是谷歌推出了自己的前端框架AngularJS，将对DOM的直接操作释放通过directive来实现复杂的DOM修改。但Angular存在一些问题，比如说其整体作为一个MVVM框架显得过重，不适用于那些对性能要求比较高的站点，例如移动端的web站，其UI组件的封装相对复杂不利于重用。而React则另辟蹊径地解决了这些问题。
首先要知道React并不是一个完整的MVC，MVVM框架，其只负责View层，React的设计团队并不认为MVC的设计模式仍适用于某些场景下的开发，所以才有了围绕React的一系列理念。设计理念的不同就决定了React要比Angular轻得多。React实现的原理是Virtual DOM机制，Virtual DOM以及数据单项绑定就使得React的渲染、响应非常快，其非常传神的表达了FaceBook这家公司的文化：独立、小巧、快速、创新。Virtual DOM带来的不仅仅是性能上的提升，更重要的是其背后所蕴含的思想—组件化开发。所以组件就是封装起来具有独立功能的UI控件，React推崇的就是用组件的方式去重新思考UI的构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式最终构成一个大的组件，完成整体UI的构建，这就意味着其是高度可重用的。
React的应用场景：
-
业务需求在复杂的场景下，还有着高性能要求。
-
重用组件库，组件组合。
-
少做无用功。
React需要正确认识的点：
-
React不是一个完整的MVC、MVVM框架，其只负责View层。
-
React 跟Web Components不冲突。
-
React的特点就是"轻"。
React的理念
在继续深入学习React的其他知识之前，我们先实现一个简单的ClickCounter组件，通过这个简单的组件思考一下React的工作方式，要了解一样东西的特点，最好的方法当然是拿这个东西和另一样东西做比较。我们就拿React和jQuery来比较。
jQuery的工作方式：
我们先用jQuery来实现ClickCounter的功能：
// index.html文件
<!doctype html>
<html>
<body>
<div>
<button id="clickMe">Click Me</button>
<div>
Click Count: <span id="clickCount">0</span>
</div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="./clickCounter.js"></script>
</body>
</html>
// clickCounter.js文件
$(function() {
$('#clickMe').click(function() {
var clickCounter = $('#clickCount');
var count = parseInt(clickCounter.text(), 10);
clickCounter.text(count+1);
})
})
在jQuery的解决方案中，首先根据CSS规则找到id为clickCount的按钮，挂上一个，挂上一个匿名事件处理函数，在事件处理函数中，选中那个需要被修改的DOM元素，读取其中的文本值，加以修改，然后修改这个DOM元素。
选中一些DOM元素，然后对这些元素做一些操作，这是一种最容易理解的开发模式。因为这种模式直观易懂。但是，对于庞大的项目，这种模式会造成代码结构复杂，难以维护。
React的工作方式：
// clickCounter.js文件
import React, { Component } from 'react';
class ClickCounter extends Component {
constructor(props) {
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state = {
count: 0
}
}
onClickButton() {
this.setState({count: this.state.count + 1});
}
render() {
const counterStyle = {
margin: '16px'
}
return (
<div style={counterStyle}>
<button onClick={this.onClickButton}>Click Me</button>
<div>
Click Count: <span id="clickCount">{this.state.count}</span>
</div>
</div>
);
}
}
export default ClickCounter;
// index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import ClickCounter from './ClickCounter';
ReactDOM.render(
<ClickCounter/>,
document.getElementById('root')
);
React的理念：
与jQuery不同，用React开发应用是另一种体验，用React开发的ClickCounter组件并没有像jQuery那样做“选择一些DOM元素然后做一些事情”的动作。
打一个比方，React是一个聪明的建筑工人，而jQuery是一个比较傻的建筑工人，开发者你就是一个建筑的设计师，如果jQuery这个建筑工人为你工作，你不得不事无巨细地告诉jQuery“如何去做”，要告诉他这面墙要拆掉重建，那面墙上要新开一个窗户，反之，如果是React这个建筑工人为你工作，你要做的就是告诉这个工人“我想要什么样子”，只要把图纸递给React这个工人，他就会替你搞定一切，当然他不会把整个建筑拆掉重建，而是很聪明地把这次的图纸和上次的图纸做一个对比，发现不同之处，然后只去做适当的修改就完成任务了。
显而易见，React的工作方式把开发者从繁琐的操作中解放出来，开发者只需要着重“我想要显示什么”，而不用操心“怎么去做”。
这种新的思维方式，对于一个简单的例子也要编写不少代码，感觉是用高射炮打蚊子，但是对于一个大型的项目，这种方式编写的代码会更容易管理，因为整个React要做的就是渲染，开发者关注的是渲染成什么样子，而不用关心如何实现增量渲染。
React的理念，归结为一个公式，就像下面这样：
UI= render(data)
这个公式表达的含义，用户看到的界面（UI），应该是一个函数（在这里叫render）的执行结果，只接受数据（data）作为参数。这个函数是一个纯函数，所谓纯函数，指的是没有任何的副作用，输出完全依赖于输入的函数，两次函数调用如果输入相同，得到的结果也绝对相同。如此一来，最终的用户界面，在render函数确定的情况下完全取决于输入数据。
对于开发者来说，重要的是区分开那些属于data，哪些属于render，想要更新用户界面，要做的就是更新data，用户界面自然会做出响应，所以React实践的也是“响应式编程”（Reactive Programming）的思想，这也就是React为什么叫做React的原因。
React工作方式的优点：
毫无疑问，jQuery的方式直观易懂，对于初学者十分适用，但是当项目逐渐变得庞大时，用jQuery写出的代码往往相互纠缠（事件与DOM元素），难以维护。
使用React的方式，就可以避免构建复杂的程序结构，无论何种事件，引发的都是React组件的重新渲染，至于如何只修改必要的DOM部分，则完全交给React去操作，开发者并不需要关心。
React利用函数式编程的思想来解决用户界面渲染的问题，最大的优势是开发者的效率会大大提高，开发出来的代码可维护性和可阅读性也大大增强。
React等于强制所有组件都按照数据驱动渲染的模式来工作，无论应用的规模多大，都能让程序处于可控范围内。
网友评论