前后端逐漸完全分離的大趨勢下,原來的輕前端重后端過度到了現(xiàn)在的重前端開發(fā)。
見證了許多前端框架輪回,從最早的property.js,到j(luò)query,從ExtJs到EasyUI,再到j(luò)queryUI的我,不得不放下陳舊的框架,從0開始并沉淀兩年的時間學(xué)習(xí)React到,開始分析為什么從Facebook開源出來的React為什么能站在當(dāng)前的風(fēng)口浪尖上。
很多人都會抱怨React學(xué)習(xí)成本這么高,語法復(fù)雜且冗余,比起原來的jquery來一行代碼現(xiàn)在要寫5行以上React代碼。它好在哪里?
客觀的說jqery的選擇器非常強大且性能高效。操作DOM元素易如反掌。信手拈來。而React則要通過原生冗余的js調(diào)用document.getElemenyById(),來獲取元素,之后通過調(diào)用setState()設(shè)置新的值通知消息事件觸發(fā)render()方法將整個頁面做重新渲染。比起jquery的$('id').val(newValue)一行代碼繞了好大一個圈。
但是
一張圖來解釋React同Jqery的比較:
如果我們操作一個dom元素來修改它的屬性或者值使用jqery會很舒服,但如果一個頁面的元素越來越多,且互相交互依賴,這樣就會讓整個js代碼越來越凌亂。代碼復(fù)雜度就會成指數(shù)級上升。而React代碼量雖然也會增多,但復(fù)雜度趨勢會趨于平緩。如果是在大型系統(tǒng)跨頁面之間通信那么jqeury就望塵莫及了。
React借鑒了后端的MVC分層思想,將前端按職責(zé)功能進行了劃分。每個模塊各司其職,條理清晰。然后所有交互都沿著一條總線進行循環(huán)。