今天我想谈的react的优势有两点：
- 声明式写法更符合人性
- 减少dom操作使性能得以提升
现在我们就写一个最简单的计数例子来比较传统的jquery和react。
jquery方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn_click" type="button" name="button">click me</button>
<span id="value">0</span>
<script src="./jquery-3.2.1.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn_click").click(function(event) {
/* Act on the event */
var clickCounter = $("#value");
var count = parseInt(clickCounter.text(),10);
clickCounter.text(count+1);
});
})
</script>
</body>
</html>
react方式
class App 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() {
return (
<div>
<button id="btn_click" type="button" onClick={this.onClickButton}>click me</button>
<span id="value">{this.state.count}</span>
</div>
);
}
}
看懂了上面上个例子，现在我们就开始比较了。
jQuery的工作方式
命令式编程，所谓命令式就是你需要告诉计算机一步一步怎么做。
在jquery的解决方案中，
- 找到clickCount的按钮，挂上一个匿名事件处理函数，在事件处理函数汇总，
- 选中那个需要修改的DOM元素，
- 读取其中文本值，
- 加已修改
- 然后修改这个DOM元素。
其中只有第4步是用js处理，不用跟DOM打交道的，做前端的都知道在性能优化中，重要的一条就是减少DOM操作。
选中一些DOM元素，然后对这些元素做一些操作，这种模式是一种很容易理解的模式。以至于John Resig一创造出jQuery就被世间普遍认可。但是，对于庞大的项目，代码结构复杂，难以维护，性能也跟不上。
React的工作方式
声明式编程，你只需要告诉计算机你需要什么就行了，不需要关心怎么去做的。
现在用统一通俗的例子来比较jQuery的命令和React的声明式。React是一个聪明的建筑工人，而jQuery是一个比较傻的建筑工人，开发者你是一个建筑工程师，如果是jQuery这个建筑工人为你工作，你不得不事无巨细地告诉jQuery“如何去做”，要告诉他这面墙要拆掉重建，那面墙上要新开一个窗户，反之，如果是React这个建筑工人为你工作，你所要做的就是告诉这个工人“我想要什么样子”，只需要把图纸递给React这个工人，他就会替你搞定一切，当然他不会把整个建筑拆掉重建，而是很聪明地把这次的图纸和上次的图纸做一个对比，发现不同之处，然后只去做适当的修改就完成任务了。
react的解决方式
在第一构建出DOM树之后，还会构建出一个Virtual DOM，是对DOM树的抽象，是一个JavaScript对象，重新渲染的时候，会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM，对比发现差异之后，只需修改真正的DOM树时就只需要触及差别中的部分就行，对于diff算法比较复杂，后面我也会整理出来和大家分享。
以刚才的例子。其实改变的只有span里的内容数字，所以react对于其他的DOM元素都不需要触及，于是执行类似下面的语句，就完成了任务。
document.getElementByID("value").innerHTML = "1";
相对于jQuery还要去访问，操作那么多次DOM，性能是大大的提高了。
纯属个人愚见，有什么错误的还希望大佬指出来。
