一張圖解釋React為什麼能成為前端新貴

前後端逐漸完全分離的大趨勢下,原來的輕前端重後端過度到了現在的重前端開發。

見證了許多前端框架輪迴,從最早的property.js,到jquery,從ExtJs到EasyUI,再到jqueryUI的我,不得不放下陳舊的框架,從0開始並沉澱兩年的時間學習React到,開始分析為什麼從Facebook開源出來的React為什麼能站在當前的風口浪尖上。

很多人都會抱怨React學習成本這麼高,語法複雜且冗餘,比起原來的jquery來一行代碼現在要寫5行以上React代碼。它好在哪裡?

客觀的說jqery的選擇器非常強大且性能高效。操作DOM元素易如反掌。信手拈來。而React則要通過原生冗餘的js調用document.getElemenyById(),來獲取元素,之後通過調用setState()設置新的值通知消息事件觸發render()方法將整個頁面做重新渲染。比起jquery的$('id').val(newValue)一行代碼繞了好大一個圈。

但是

一張圖來解釋React同Jqery的比較:

一張圖解釋React為什麼能成為前端新貴

如果我們操作一個dom元素來修改它的屬性或者值使用jqery會很舒服,但如果一個頁面的元素越來越多,且互相交互依賴,這樣就會讓整個js代碼越來越凌亂。代碼複雜度就會成指數級上升。而React代碼量雖然也會增多,但複雜度趨勢會趨於平緩。如果是在大型系統跨頁面之間通信那麼jqeury就望塵莫及了。

React借鑑了後端的MVC分層思想,將前端按職責功能進行了劃分。每個模塊各司其職,條理清晰。然後所有交互都沿著一條總線進行循環。

=======================================

備註一下:

本章文章是來分析,講解React的,不是來評論React,Vue哪個優劣這種低端問題的。如果你喜歡用Vue,可以,我贊成。如果你是來抬槓的請繞道。


分享到:


相關文章: