???? React ?? DOM ?? ??? React ?? DOM ?? ? ?? ??? ?? ????????.

? ????? ??? ?? ??? ????? UI? ????? ???, DOM? ????? ?? ??? ?? ?? ??? ??? ?? ??? ????. ?? DOM(Virtual DOM) ????? ?????.

1. ?? DOM?? ??????

React?? ??? ??? ??? ?? DOM ??? ??? ?? DOM??? ??? ??? JavaScript ?????.

Virtual DOM? ?? ?? ? ???? Diff ????? ?? React? ????????. ?? ?? ?? ??? ?? ?? ?? ???? ?? ???? "?? ??"? ? ???, ?? DOM? ?????? ??? ??? ???? ?? DOM ??? ????? ?????. ?? ????? ????? ?? DOM? ??? ????? ?? ? ??? ???, ? ?? ????? ???? React ????? ??? ???? ? ? ???? ? ??? ? ?? ???, ???? ????? ? ??? ? ????. ?? ????.

2. ?? DOM VS ?? ???? ???? DOM?

?? DOM? ??? innerHTML? ?? ????? ???. ? ??? ? ??? ?? ???? ??? ???? ??????. ??? ? ?? ???? ??? ???? ?? innerHTML? ????? ??? ?? ??? ?????.

innerHTML? Virtual DOM? ?? ??? ??? ??? ?? ?????.

innerHTML: html ??? ??? + ?? DOM ?? ?? ???

Virtual DOM: Virtual DOM ??? + diff + ??? DOM ????

DOM ??? ???? js ??? ?? ?????. Virtual DOM render + diff? html ???? ????? ??? ??? ???? ??? ??? js ?? ????? ?? DOM ???? ?? ?????. ?? ?? DOM? ?? ???? ??? React? ??? ?? ??? ??? ??? ????. DOM ????? DOM ??? ???????. ??? ?? ?? ??????? ??? 1,000?? ?? ????? 20?? ?? ??? ??? ? ???, ? ?? ???? ???? ?????? ? ? DOM ??? ????? ???????.

function?Raw()?{
??var?data?=?_buildData(),
????html?=?"";
??...
??for(var?i=0;?i<data.length; i++) {
    var render = template;
    render = render.replace("{{className}}", "");
    render = render.replace("{{label}}", data[i].label);
    html += render;
  }
  ...
  container.innerHTML = html;
  ...
}

??? ?? React? ??? ?? DOM ???? ?? ????.

??? DOM? Javascript? ?? ??? ????(Javascript ???? ???? ????). Javascript? ??? ?? ???? ?????. DOM? ??? Javascript?

? ??? ? ??? ???? ?????? ??? API ?????. JIT(Just-In-Time) ??? ???? DOM ??? ?? ????? ?? ????. Virtual DOM? ??? ???? Javascript ???? ????? ??? ????? ?? ????. React.js? ?? ?? DOM? ?? ?? ? ??? ?? ???? DOM? ?? ???? ??? ??? ?????. ?? ??? ?? DOM ??? ???? ? ?? ?? DOM? ?????. diff ????? ?? ???? ?? Diff ????? O(n^3)?? O(n)?? ???????. ? ??? ?? ??? ???? ???????.

3. ?? DOM VS MVVM? React? ???? Angular, Knockout, Vue ? Avalon? ?? ?? MVVM ?????? ??

? ?????. ?, Directive/Binding ??? ?? ??? ?? ??? ???? ???? ??? ? ?? ??? ?????. ??. MVVM? ?? ?? ??? ??? ???? ????? ??, React? ??? DOM ?? ???? ??????. MVVM? ??? ?? ?? ?? ??? ?? ????. Angular? ?? ??? ?? ??? O(??? ?)? ?? ??? ?????. Knockout/Vue/Avalon? ?? js ? DOM ???? ??? ??? ?????. ? O(??):

?? ??: ?? ????? + ?? DOM ????
??? ???: ??? ??? + ?? DOM ????

Angular? ?? ????? ?? ?? ???? ??? ?? ???? ?? ??? ????? ???? ? ? ????. ???! ?? ???? ???? Angular? ??? ??? ?? ????. ??? ???? ??? ? ??? ?? ? ??? ???? ????, ? ??? ?????? ?? ?? ?? ??? ? ???, ??? ?? ?? ???? ?? ?? ??? ?????.

MVVM? ??? ???? ? ? ??? ?? ??? ??? ???? ? ??? ????? ?? ViewModel ???? ?? ????? ??? ???? ?? ? ??? "??" ??? ??? ??? ????. ??? ViewModel/?? ???? ??? Virtual DOM?? ?? ??? ??? MVVM ?? ???? ???? React?? ?? ?? ?? ?????. ???? ?? MVVM ??? ???? ??? ?? ???? ?? ??? ??? ??? ?, ?? ???? ??? ??? ??? ?? ?? ??? ViewModel ????? DOM ??? ????? ????? ?????. ??? ???? ??? ???? "?"??? MVVM? ??? ?? ????? ?? ???? ?? ????? ?? ?? ?? ????? ?? ????? ???. ??? ??? ??? ??/??? ??? ????? ?? ?????. ?? React? ?? ??? DOM ?? ???? ????? ??? ??? ???? ???? ?? ??? ??? ???? ?? ? ???? ??? ? ??? ????.

Angular? Vue? ?? ?? ?? ???? ?? ??? ????? ?????. ?? ????? DOM ??? ????? ????? ??? ?????? "??"???. ?? ??, ??????? ??? ??? ? ?? ??? ?? API ???? ?? ??? ??? ??? ??? uid? ????. ?? track by uid? ?????? ? ??? ??? ??? ????? Angular? ?? ? ????. ??? ?? ???? ???? ????? DOM ??? ???? ? ??, ??? ??? ?????? ???. ?? $index? ?? ???? "?? ???"? ??? ?? ????. ?, ??? ??? ?????? ?? ???? ? ????. ??? ??? ??? ?? ??? $index? ??? ???? ?? ?? ???? React?? ?? ??? ????. dbmonster ?????? track by $index: dbmon? ??? ? Angular? Vue? React?? ????. (Angular? ?? ??? ????? ???? ???? ??? ??? ????.)

??? ??? ? ?? ??? ?? ??? ???? ???. ???, ??? ??? ????? ??? ??? ???? ? ??? ??? ????. ?? DOM, ?? ?? MVVM, ??? ?? MVVM? ??? ?? ??? ??? ?? ??? ????. ??? ??? ????? ??? ????? ?? Virtual DOM?? shouldComponentUpdate ?? ?? ???? ?? ?? ???? ?????.

1. ?? ???: ?? DOM > ?? ?? >= ??? ??

2. ??? ??? ????: ??? ?? >> ?? DOM + ?? ??(???? ? ??) > ???

3. ??? ??? ????: ?? ?? + ???>= ??? ?? + ???> ?? DOM(???? ? ??/?? ??)>> MVVM ??? ??

4. (? ??? Zhihu ??)

4. React virtual DOM? ?? ???

React? "React? ?? DOM ???? ????"?? ?? ?? ????. React? ???? ????? ??? ??? ??? ??? ??? ? ??? ?????.

React? ?? DOM ??? ????? ?? ???? ???? ??? ??? ? ?? ??? ? ?? ?? ??? ? ????. ??? Zhihu? ?? ??? ???? ???. ?????? DOM ?? ??? ?? ?? API?? ??? ? ?? ?? ??? ? ??? ???? ?? ??? ?? ?????? ??? ?? ???? ? ??? DOM ??? ???? ? ????. ?????? ???. ?? ????? ?? ?? ??????? ?? ?? ???? ??? ? ??? ??? ?????? ?? ??????? ??? ? ?? ??? ?? ???? ???? ??????? ?? ???? ??? ?? ??? ??????.

? ??? ??? ?? ? ??? ?????? ?????. ? ???? ??? ??? PHP ??? ????? ?? ?? ??? ?????!

????:

??? ??? WeChat ?? ?????? ?? ??? ??


WeChat ?? ?????? ?? ??? ?? ?? ??


? ??? React ?? DOM? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!