之前做移動端開發(fā)，后來混合開發(fā)，開始接手部分前端工作，一上來就是使用react框架來做。雖然之前對前端知識有所了解，但也僅僅是了解層面。想整理一下前端歷史，看看自己是否遺漏前端必要的基礎(chǔ)知識。
前端開發(fā)者開始基本上只需要根據(jù)后臺提供的數(shù)據(jù)將網(wǎng)頁內(nèi)容排版呈現(xiàn)出來即可。用戶的交互行為一般僅限于填寫一個表單，然后把數(shù)據(jù)提交到服務(wù)器，提交成功后，直接刷新整個頁面。
1.反復(fù)刷新頁面，尤其是內(nèi)容復(fù)雜的頁面，對瀏覽器的渲染性能消耗很大。一個很小的局部交互動作，就會引起整個頁面的刷新，顯然對于瀏覽器性能是非常大的浪費(fèi)。同時，由于頁面刷新，導(dǎo)致不必要的等待和“閃屏”，這些對于有節(jié)操的產(chǎn)品汪或者程序猿都是難以容忍的。
2.由交互產(chǎn)生的很多細(xì)膩的前端數(shù)據(jù)，其實也很難交給后臺處理，因為這是我們無處安放的臨時狀態(tài)。例如一個菜單是收起還是打開，一個面板是隱藏還是彈出，如果前端不去記錄這些view對應(yīng)的狀態(tài)，那么后臺就要記錄這些狀態(tài)，否則頁面刷新后，這些狀態(tài)信息就會丟失。即使我們不在乎頁面和服務(wù)器之間通信的時間浪費(fèi)，我們也很難想象有什么理由要在服務(wù)器上記錄這些只和view相關(guān)的臨時狀態(tài)，畢竟這些狀態(tài)不對應(yīng)任何后臺業(yè)務(wù)數(shù)據(jù)。

Ajax出現(xiàn)與局部頁面更新。大量交互數(shù)據(jù)更新，我們需要把頁面中元素取出來，重新賦值，再放回去。很麻煩。
Jsp：是能在html中插入java代碼，html中顯示java對象，變量值。
Jsx：js中插入標(biāo)簽xml，xml中顯示js對象、變量。

react的奇思妙想：可不可以把瀏覽器里的DOM tree克隆一份完整的鏡像到內(nèi)存，也就是所謂的“virtual DOM”，當(dāng)頁面的state發(fā)生變化以后，根據(jù)最新的state重新生成一份virtual DOM（相當(dāng)于在內(nèi)存里“刷新”整個頁面），將它和之前的virtual DOM做比對（diff），然后在瀏覽器里只渲染被改變的那部分內(nèi)容。
改變state，view自動更新

view的組件化和模塊化非常有利于分工協(xié)作、代碼的積累復(fù)用以及單元測試。這對于提高團(tuán)隊開發(fā)的效率無疑具有非常重要的意義，這也是react廣受青睞的重要原因之一，

決定頁面呈現(xiàn)的state可以通過模塊屬性（props）從父模塊傳遞到子模塊。這種"樹狀"分流機(jī)制，有點像植物將養(yǎng)分（state）從根部不斷運(yùn)輸?shù)郊?xì)枝末葉的過程
前端工作像拼接積木一樣，搭出想要的界面