一个例子来谈react的两大优势
in 前端 with 0 comment

一个例子来谈react的两大优势

in 前端 with 0 comment

今天我想谈的react的优势有两点:

  1. 声明式写法更符合人性
  2. 减少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的解决方案中,

  1. 找到clickCount的按钮,挂上一个匿名事件处理函数,在事件处理函数汇总,
  2. 选中那个需要修改的DOM元素,
  3. 读取其中文本值,
  4. 加已修改
  5. 然后修改这个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,性能是大大的提高了。

纯属个人愚见,有什么错误的还希望大佬指出来。

请为这篇文章评分:
( 已有 1 人评分, 平均得分: 9 分 )
Responses