今天我想谈的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,性能是大大的提高了。
纯属个人愚见,有什么错误的还希望大佬指出来。