寫jsx 前端開發,為什麼我支援模板而不是JSX。

2021-10-14 18:10:58 字數 892 閱讀 8983

雖然我使用react的比例明顯高於vue和angular(因為社群比另外兩者繁榮太多),但是我依然支援模板,而不是jsx作為前端開發view層的選擇。

原因如下

1.jsx看似提供了更高的自由度,實際上很多時候應該避免使用這種自由度。因為我的實際經驗,絕大多數需要jsx自由度的情況往往出現在不合格的設計中。jsx與模板最大的差別在於jsx可以拿到jsx.element,但是直接操作jsx.element實際上破壞了這種jsx=view的心智模型,導致需要額外考慮jsx→vdom的執**況,而這本來是react希望避免的。hoc和cloneelement也有這樣的弊病,而renderprops(對應vue slot,angular ng-content)就是更好的設計。

2.模板雖然讓inline表示式變得醜陋,不直觀。但是客觀上他驅使程式設計師寫m v vm分離的**。而前端開發的不良設計經常就是混淆v和vm導致的。

3.模板和邏輯分離,有助於前端開發人員和運營/設計的協作。比如遊戲引擎那種協作模式。拖拽搭建的解決方案最大的痛點就是,在描述邏輯的時候,**遠比圖形介面高效得多,而對於拖拽搭建的場景,大多數時候邏輯的改動又是微小但獨特的改動。這種情況下,系統原生支援和邏輯視覺化配置的成本都非常高,只有讓開發/設計/運營都擁有二次介入的能力,才可以以比較低的成本解決這個問題。這就導致需要實現「視覺化搭建介面」和「**」的可逆轉換。顯然,純淨的view層與視覺化之間的轉化成本是最低的,而邏輯層幾乎不可能轉化。所以,嚴格確保view層的純淨,是未來web開發協作流程提效的關鍵。

4.再來就是效能了,從vue的block tree大家已經看出來模板是如何搭配runtime實現點對點粒度的更新觸發機制的。jsx只能以元件為粒度觸發vdom diff,模板卻可以跳過無需檢測的節點和無需檢測的props。而jsx則因為過度的靈活性,導致很多行為無法在編譯階段**優化,不得不無腦地diff。。

軟體開發為什麼很難

簡單 問題因果關係非常明顯感知 分類 響應 sense categorise respond 復合 complicated 問題因果關係需要分析感知 分析 響應 sense analyze respond 複雜 complex 問題因果關係僅能夠從回顧中發現探索 感知 響應 probe sense ...

敏捷開發為什麼會流行

許多人好奇,誰真的會從敏捷開發中受益,以及怎樣才能受益。我將從以下5個重要的方面帶領你應用敏捷開發的原則和價值,以及分析 從長遠來看 參與的人將怎樣受益。利益相關者 敏捷開發保證了專案中所有利益相關者的利益,不論是客戶 專案管理 開發團隊或測試小組。每個人對專案都有清晰的可見性,這是成功的關鍵點所在...

小猿圈web前端開發為什麼需要HTTPS

在http協議中有可能存在資訊竊取或身份偽裝等安全問題。使用https通訊機制可以有效地防止這些問題。http協議存在的哪些問題 通訊使用明文 不加密 內容可能被竊聽 由於http本身不具備加密的功能,所以也無法做到對通訊整體 使用http協議通訊的請求和響應的內容 進行加密。即,http報文使用明...