摘要：如果我們不使用提供的事件系統定時器和，如在事件中進行數據更新時，我們需要手動調用。

在傳統的WEB開發中，當與用戶或服務器發生交互時，需要我們手動獲取數據并更新DOM，這個過程是繁瑣的、易錯的。
特別是當頁面功能過于復雜時，我們既要關注數據的變化，又要維護DOM的更新，這樣寫出來的代碼是很難維護的。
新一代的框架或庫，例如Angular、React、Vue等等讓我們的關注點只在數據上，當數據更新時，這些框架/庫會幫我們更新DOM。
那么這里就有兩個很重要的問題了：當數據變化時，這些框架/庫是如何感知到的？當我們連續更新數據時，這些框架/庫如何避免連續更新DOM，而是進行批量更新？
帶著這兩個問題，我將簡要分析一下React、Angular1、Angular2及Vue的實現機制。

React在更新UI的時候會根據新老state生成兩份虛擬DOM，所謂的虛擬DOM其實就是JavaScript對象，然后在根據特定的diff算法比較這兩個對象，找出不同的部分，最后根據改變的那部分進行對應DOM的更新。
那么React是如何知道數據變化了呢？我們通過手動調用setState告知React我們需要更新的數據。

例如我們這里有一個很簡單的組件：

class App extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      val: 0,
    };
  }

  handleClick() {
    this.setState({val: 1});
  }

  render() {
    return (
      

        {this.state.val}
        change val
      
    )
  }
}

當我點擊按鈕的時候調用this.setState({val: 1});，React就會將this.state.val更新成1，并且自動幫我們更新UI。
如果點擊按鈕的時候我們連續調用setState會怎么樣？React是連續更新兩次，還是只更新一次呢？為了更好的觀察出React的更新機制，我們將點擊按鈕的邏輯換成下面的代碼

this.setState({val: 1});
console.log(this.state.val);

this.setState({val: 2});
console.log(this.state.val);

打開控制臺，點擊按鈕你會發現打印了0 0，同時頁面數據也更新成了2。所以我們就得出結論：React的更新并不是同步的，而是批量更新的。
我們別急著下結論，我們知道應用程序狀態的改變主要是下面三種情況引起的：

Events - 如點擊按鈕

Timers - 如setTimeout

XHR - 從服務器獲取數據

我們才測試了事件這一種情景，我們試著看看其余兩種情景下state的變化，將點擊按鈕的邏輯換成如下代碼

setTimeout(() => {
  this.setState({val: 1});
  console.log(this.state.val);

  this.setState({val: 2});
  console.log(this.state.val);
});

打開控制臺，點擊按鈕你會發現打印了1 2，相信這個時候很多人就懵了，為啥和第一種情況的輸出不一致，不是說好的批量更新的么，怎么變成連續更新了。
我們再試試第三種情景XHR，將點擊按鈕的邏輯換成下面的代碼

fetch("/")
  .then(() => {
    this.setState({val: 1});
    console.log(this.state.val);

    this.setState({val: 2});
    console.log(this.state.val);
  });

打開控制臺，點擊按鈕你會發現打印的還是1 2，這究竟是什么情況？如果仔細觀察的話，你會發現上面的輸出符合一個規律：在React調用的方法中連續setState走的是批量更新，此外走的是連續更新。
為了驗證這個的猜想，我們試著在React的生命周期方法中連續調用setState

componentDidMount() {
  this.setState({val: 1});
  console.log(this.state.val);

  this.setState({val: 2});
  console.log(this.state.val);
}

打開控制臺你會發現打印了0 0 ，更加驗證了我們的猜想，因為生命周期方法也是React調用的。到此我們可以得出這樣一個結論：

在React調用的方法中連續setState走的是批量更新，此外走的是連續更新

說到這里，有些人可能會有這樣一個疑惑

handleClick() {
  setTimeout(() => {
    this.setState({val: 1});
    console.log(this.state.val);

    this.setState({val: 2});
    console.log(this.state.val);
  });
}

setTimeout也是在handleClick當中調用的，為啥不是批量更新呢？
setTimeout確實是在handleClick當中調用的，但是兩個setState可不是在handleClick當中調用的，它們是在傳遞給setTimeout的參數——匿名函數中執行的，走的是事件輪詢，不要弄混了。

綜上，說setState是異步的需要加一個前提條件，在React調用的方法中執行，這時我們需要通過回調獲取到最新的state

this.setState({val: 1}, () => {
  console.log(this.state.val);
});

相信這個道理大家不難理解，因為事件和生命周期方法都是React調用的，它想怎么玩就怎么玩。那么React內部是如何實現批量更新的呢？

React當中事務最主要的功能就是拿到一個函數的執行上下文，提供鉤子函數。啥意思？看個例子

import Transaction from "react/lib/Transaction";

const transaction = Object.assign({}, Transaction.Mixin, {
  getTransactionWrappers() {
    return [{
      initialize() {
        console.log("initialize");
      },
      close() {
        console.log("close");
      }
    }];
  }
});
transaction.reinitializeTransaction();
const fn = () => {
  console.log("fn");
};
transaction.perform(fn);

執行這段代碼，打開控制臺會發現打印如下

initialize
fn
close

事務最主要的功能就是可以Wrapper一個函數，通過perform調用，在執行這個函數之前會先調用initialize方法，等這個函數執行結束了在調用close方法。事務的核心代碼很短，只有五個方法，有興趣的可以去看下。
結合上面setState連續調用的情況，我們可以大致猜出React的更新機制，例如執行handleClick的時候

let updating = false;

setState = function() {
  if(updating){
    // 緩存數據
  }else {
    // 更新
  }
}

const transaction = Object.assign({}, Transaction.Mixin, {
  getTransactionWrappers() {
    return [{
      initialize() {
        updating = true;
      },
      close() {
        updating = false;
        // 更新
      }
    }];
  }
});
transaction.reinitializeTransaction();

transaction.perform(instance.handleClick);

我們再來深入一下setState的實現，看看是不是這么回事，下面是setState會調用到的方法

function enqueueUpdate(component) {
  ensureInjected();

  if (!batchingStrategy.isBatchingUpdates) {
    batchingStrategy.batchedUpdates(enqueueUpdate, component);
    return;
  }

  dirtyComponents.push(component);
  if (component._updateBatchNumber == null) {
    component._updateBatchNumber = updateBatchNumber + 1;
  }
}

看變量名稱我們也都能猜到大致功能，通過batchingStrategy.isBatchingUpdates來決定是否進行batchedUpdates（批量更新），還是dirtyComponents.push（緩存數據），結合事務，React的批量更新策略應該是這樣的

const transaction = Object.assign({}, Transaction.Mixin, {
  getTransactionWrappers() {
    return [{
      initialize() {
        batchingStrategy.isBatchingUpdates = true;
      },
      close() {
        batchingStrategy.isBatchingUpdates = false;
      }
    }];
  }
});
transaction.reinitializeTransaction();

transaction.perform(instance.handleClick);
transaction.perform(instance.componentDidMount);

React通過setState感知到數據的變化，通過事務進行批量更新，通過Virtual DOM比較進行高效的DOM更新。

Angular1通過臟值檢測去更新UI，所謂的臟值檢測其實指Angular1從$rootScope開始遍歷所有scope的$$watchers數組，通過比較新老值來決定是否更新DOM。看個例子

{{val}}

angular.module("myApp", [])
  .controller("MyCtrl", function($scope) {
    $scope.val = 0;
  });

這個是一個很簡單的數據渲染的例子，我們在控制臺打印下scope，看下$$watchers的內容

因為只有val一個表達式所以$$watchers長度只有1

eq 是否進行數據的深度比較

exp 檢測出錯時log所用

fn 更新DOM

get 獲取當前數據

last 老的數據

那么Angular1是如何感知到數據變化的呢？

Angular1通過調用$scope.$apply()進行臟值檢測的，核心代碼如下

遍歷所有scope的$$watchers，通過get獲取到最新值同last比較，值變化了則通過調用fn更新DOM。有人可能會疑惑了，我們在編碼的時候并沒有調用$apply，那么UI是怎么更新的呢？
實際上是Angular1幫我們調用了，我們看下ng事件的源碼實現

forEach(
  "click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste".split(" "),
  function(eventName) {
    var directiveName = directiveNormalize("ng-" + eventName);
    ngEventDirectives[directiveName] = ["$parse", "$rootScope", function($parse, $rootScope) {
      return {
        restrict: "A",
        compile: function($element, attr) {
          var fn = $parse(attr[directiveName], /* interceptorFn */ null, /* expensiveChecks */ true);
          return function ngEventHandler(scope, element) {
            element.on(eventName, function(event) {
              var callback = function() {
                fn(scope, {$event:event});
              };
              if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
                scope.$evalAsync(callback);
              } else {
                scope.$apply(callback);
              }
            });
          };
        }
      };
    }];
  }
);

很明顯調用了$scope.$apply，我們再看下$timeout的源碼

function timeout(fn, delay, invokeApply) {
  // ...
  
  timeoutId = $browser.defer(function() {
    try {
      deferred.resolve(fn.apply(null, args));
    } catch (e) {
      deferred.reject(e);
      $exceptionHandler(e);
    }
    finally {
      delete deferreds[promise.$$timeoutId];
    }

    if (!skipApply) $rootScope.$apply();
  }, delay);

  // ...
}

最后也調用了$rootScope.$apply，$http服務實際上也做了同樣的處理，說到這，三種引起應用程序狀態變化的情景，Angular1都做了封裝，所以我們寫代碼的時候不需要手動去調用$apply了。
新手常碰到的一個問題就是為啥下面的代碼不起作用

$("#btn").on("click", function() {
  $scope.val = 1;
});

因為我們沒有用Angular1提供的事件系統，所以Angular1沒法自動幫我們調用$apply，這里我們只能手動調用$apply進行臟值檢測了

$("#btn").on("click", function() {
  $scope.val = 1;
  $scope.$apply();
});

在Angular1中我們是直接操作數據的，這個過程Angular1是感知不到的，只能在某個點調用$apply進行臟值檢測，所以默認就是批量更新。如果我們不使用Angular1提供的事件系統、定時器和$http，如在jQuery事件中進行數據更新時，我們需要手動調用$apply。

當數據變化時，Angular2從根節點往下遍歷進行更新，默認Angular2深度遍歷數據，進行新老數據的比較來決定是否更新UI，這點和Angular1的臟值檢測有點像，但是Angular2的更新沒有副作用，是單向數據流。
同時大家也不用擔心性能問題

It can perform hundreds of thousands of checks within a couple of milliseconds. This is mainly due to the fact that Angular generates VM friendly code — by Pascal Precht

Angular2也提供了不同的檢測策略，例如

@Component({
  selector: "child",
  template: `
    
{{data.name}}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})

設置了變化檢測策略為OnPush的組件不走深度遍歷，而是直接比較對象的引用來決定是否更新UI。

Angular2同Angular1一樣都是直接操作數據的，框架都無法直接感知數據的變化，只能在特定的時機去做批量更新。
Angular1是通過封裝自動調用$apply，但是存在手動調用的場景，為了解決這個問題，Angular2沒有采用1的實現機制，轉而使用了Zone.js。

Zone.js最主要的功能就是可以獲取到異步方法執行的上下文。什么是執行上下文？例如

function foo() {
  bar();
}

foo();
baz();

同步的方法我們可以明確的知道bar什么時候執行和結束，可以在bar結束的時候調用baz。但是對于異步方法，例如

function foo() {
  bar();
}

setTimeout(foo);
baz();

我們無法知道foo是什么時候開始執行和結束，因為它是異步的。如果調用改成這樣

function foo() {
  bar();
}

setTimeout(function() {
  foo();
  baz();
});

通過添加一層wrapper函數，不就可以保證在foo執行完調用baz了么。Zone.js主要重寫了瀏覽器所有的異步實現，如setTimeout、XMLHttpRequest、addEventListener等等，然后提供鉤子函數，

new Zone().fork({
  beforeTask: function() {
    console.log("beforeTask");
  },
  afterTask: function() {
    console.log("afterTask");
  }
}).run(function mainFn() {
  console.log("main exec");
  setTimeout(function timeoutFn() {
    console.log("timeout exec");
  }, 2000);
});

打開控制臺，你會發現打印如下

beforeTask
main exec
afterTask

beforeTask
timeout exec
afterTask

Zone.js捕獲到了mainFn和timeoutFn執行的上下文，這樣我們就可以在每個task執行結束后執行更新UI的操作了。Angular2更新機制大體如下

class ApplicationRef {
  changeDetectorRefs:ChangeDetectorRef[] = [];

  constructor(private zone: NgZone) {
    this.zone.onTurnDone
      .subscribe(() => this.zone.run(() => this.tick());
  }

  tick() {
    this.changeDetectorRefs
      .forEach((ref) => ref.detectChanges());
  }
}

ngZone是對Zone.js的服務封裝，Angular2會在每個task執行結束后觸發更新。

由于Zone.js的存在，我們可以在任何場景下更新數據而無需手動調用檢測，Angular2也是批量更新。

Vue模板中每個指令/數據綁定都有一個對應的watcher對象，當數據變化時，會觸發watcher重新計算并更新相應的DOM。

Vue通過Object.defineProperty將data轉化為getter/setter，這樣我們直接修改數據時，Vue就能夠感知到數據的變化了，這個時候就可以進行UI更新了。
如果我們連續更新數據，Vue會立馬更新DOM還是和React一樣先緩存下來等待狀態穩定進行批量更新呢？我們還是從應用程序狀態改變的三種情景來看

var vm = new Vue({
  el: "#app",
  data: {
    val: 0
  },
  methods: {
    onClick: function() {
      vm.val = 1;
      console.log(vm.$el.textContent);

      vm.val = 2;
      console.log(vm.$el.textContent);
    }
  }
});

打開控制臺，點擊按鈕會發現打印0 0，說明Vue并不是立馬更新的，走的是批量更新。由于事件系統用的Vue提供的，是可控的，我們再看下定時器下執行的情況

var vm = new Vue({
  el: "#app",
  data: {
    val: 0
  }
});

setTimeout(function() {
  vm.val = 1;
  console.log(vm.$el.textContent);

  vm.val = 2;
  console.log(vm.$el.textContent);
});

打開控制臺，點擊按鈕會發現依舊打印了0 0，有人可能就疑惑了Vue是不是跟Angular2一樣也修改了異步方法的原生實現呢？
Vue并沒有這么干，不用于React、Angular1/2捕獲異步方法上下文去更新，Vue采用了不同的更新策略。

每當觀察到數據變化時，Vue就開始一個隊列，將同一事件循環內所有的數據變化緩存起來。如果一個watcher被多次觸發，只會推入一次到隊列中。

等到下一次事件循環，Vue將清空隊列，只進行必要的DOM更新。在內部異步隊列優先使用MutationObserver，如果不支持則使用setTimeout(fn, 0) — vuejs.org

這是官方文檔上的說明，抽象成代碼就是這樣的

var waiting = false;
var queue = [];

function setter(val) {
  if(!waiting) {
    waiting = true;
    
    setTimeout(function() {
      queue.forEach(function(item) {
        // 更新DOM
      });
      
      waiting = false;
      queue = [];
    }, 0);
  } else {
    queue.push(val);
  }
}

setter(1);
setter(2);

Vue是通過JavaScript單線程的特性，利用事件隊列進行批量更新的。

我們可以通過將Vue.config.async設置為false，關閉異步更新機制，讓它變成同步更新，看下面的例子

Vue.config.async = false;

var vm = new Vue({
  el: "#app",
  data: {
    val: 0
  }
});

setTimeout(function() {
  vm.val = 1;
  console.log(vm.$el.textContent);

  vm.val = 2;
  console.log(vm.$el.textContent);
});

打開控制臺你會發現打印了1 2，但是最好別這么干

如果關閉了異步模式，Vue 在檢測到數據變化時同步更新 DOM。在有些情況下這有助于調試，但是也可能導致性能下降，并且影響 watcher 回調的調用順序。async: false不推薦用在生產環境中 — vuejs.org

自此我們分析了React、Angular1/2和Vue的變化檢測以及批量更新的策略。
React和Angular1/2都是通過獲取執行上下文來進行批量更新，但是React和Angular1支持的并不徹底，都有各自的問題。
Angular2可以適配任意情況，但是是通過篡改了原生方法實現的。Vue則通過ES5特性和JavaScript單線程的特性進行批量更新，無需特殊處理，可以滿足任何情況。