這篇文章主要介紹了JavaScript的React框架的原理,包括其與AngularJS的比較,需要的朋友可以參考下
如果你在兩個月前問我對React的看法,我很可能這樣說:
我的模板在哪里?javascript中的HTML在做些什么瘋狂的事情?JSX開起來非常奇怪!快向它開火,消滅它吧!
那是因為我沒有理解它.
我發(fā)誓,React 無疑是在正確的軌道上, 請聽我道來.
Good old MVC
在一個交互式應(yīng)用程序一切罪惡的根源是管理狀態(tài)。
“傳統(tǒng)”的方式是MVC架構(gòu),或者一些變體。
MVC提出你的模型是檢驗真理的唯一來源 - 所有的狀態(tài)住在那里。
視圖是源自模型,并且必須保持同步。
當(dāng)模式的轉(zhuǎn)變,所以沒有查看。
最后,用戶交互是由控制器,它更新模型抓獲。
到目前為止,一切都很好。
模型發(fā)生變化時就要對視圖進行渲染
這看起來相當(dāng)簡單。首先,我們需要描述視圖——它是如何將模型狀態(tài)轉(zhuǎn)換到DOM上去的。然后,用戶一發(fā)生了什么操作我們就要對模型進行更新,并且要對整個頁面進行重新渲染... 對不? 沒這么快哦. 不幸的事,這其實并沒有這么直接,因為如下兩個原因:
DOM實際上有某種狀態(tài),就比如一個文本輸入框中的內(nèi)容. 如果你完全作廢你的DOM來進行重新渲染,這樣的內(nèi)容會丟失掉.
DOM 操作 (像刪除和插入節(jié)點) 真的慢. 頻繁的渲染會導(dǎo)致嚴重的性能問題.
那么我們?nèi)绻诒苊膺@些問題的前提下保持模型和視圖同步呢?
數(shù)據(jù)綁定
過去三年,被引進用來解決這個問題最常用多框架功能就是數(shù)據(jù)綁定.
數(shù)據(jù)綁定能自動地保持模型和視圖的同步. 通常在JavaScript中就代表了對象和DOM.
它會通過讓你聲明應(yīng)用中各個塊之間的依賴來對這一同步進行打包。狀態(tài)的變化會在整個應(yīng)用程序中蔓延,然后所有的依賴塊都會被自動更新.
讓我們來看看一些有名的框架中它實際是如何運作的吧.
Knockout
Knockout 主張使用的是 MVVM (模型-視圖-視圖模型) 方法,并且?guī)湍銓崿F(xiàn)了“視圖”的部分:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 // View (a template) <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2> // ViewModel (diplay data... and logic?)新聞熱點
疑難解答
圖片精選