現在react.js如火如荼,非常火爆,昨天抽了一天來看了下這項技術。可能就看了一天,研究的不深入,但是我在看的過程中發現來了很多疑惑,這里拿出來和那家分享討論以此共勉。
在我接觸的前端以后,讓我感覺眼前一亮的有一個框架,一種思想。一個框架就是jquery,解決了瀏覽器兼容問題;一種思想就是mvvm,真正的讓前端從docment操作中脫離出來,但是當時沒找到很中意的框架,就自己造了一個輪子。
react的設計有幾點我是不理解的:
流式綁定
在mvvm框架設計中,有一個難點就是局部刷新,因為要更新我們的數據模型的時候我們必須要找到對應的docment節點來,以此來更新我們的視圖
如上圖,所以我們在內存里必須維護一個docment節點樹,維護這個節點樹是比較麻煩的,但是流式渲染卻不需要維護這個節點樹。因為每次更新都是重新渲染頁面,但這樣做是很耗性能的,所以react搞了一個虛擬節點,他的渲染就變成了這樣
這里多出了一步“對比” ,所以那些傳言react的性能比angular高,我一直持懷疑態度,怎么多出了一步還會高?,有興趣的可以自己測試一下,或許里面有什么“不可告人的秘密” :),如果真是這樣,那倒是真的值得研究一下他的源碼,看看到底是哪路神仙造成性能提升,
流式綁定的缺點:使雙向綁定變得困難,下面看下為什么變困難
傳統的的雙向綁定的難點
上圖中有三個值為xxx文本框,當焦點在第一個文本框的時候我們通過輸入來改變文本框的值,這時候會觸發渲染事件,第二個文本框和第三個文本框會被渲染,會避開第一個文本框不渲染,原因?
1.因為我們在第一個文本框輸入的值,這個就是最近的值 不需要渲染
2.如果第一個文本框也渲染,那就在某些瀏覽器中無法輸入中文或者光標的位置跑到輸入框前面
但是,流式渲染很難做到精確控制,所以使我們的雙向綁定變的困難;
當然這個問題也不是沒有解決方案,我只是說這里增加了我們實現雙綁定的難度
React編譯的最初的目的是掩蓋html寫在js里這件丑陋的事
把html片段寫在js里面的痛苦想必大家都有體會,react也是把html寫在js'里;但是我們的react為了為了使這件事情看起來沒那么糟糕,搞了編譯這么個東西;這樣我們寫在js里的代碼看起就沒那么糟糕。但是我們的編譯只做這件事似乎把設計react的工程師的心里想法暴露了,所以這個編譯也能把es6 編譯為es5,這樣在es6的炒作下,
就掩蓋了編譯的最初的目的是掩蓋html寫在js里這件丑陋的事,當然facebook的工程師也許不這樣想,或許我的猜測不對,但無論怎么樣在js里寫html代碼總是一件不好的事
上面是我對react的兩點疑惑,當然他的組件化開發是值得稱道的,設計的很優秀,但是組件化開發是個雙刃劍有利有弊,具體的根據業務。
綜上所述:在react的傳播中,在人們的對es6和組件化開發的追逐中,react的優點被無限放大,而缺點被掩飾了。但是無論是es6還是組件化開發,都是雙刃劍,至少在前端開發中,暫且不論nodejs