日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

雙向綁定與單向數據流之爭,Solid會取代React嗎

來源: 責編: 時間:2023-11-28 09:36:24 221觀看
導讀現在有一種觀點聲音逐漸大了起來,認為市面上出現了許多比 React 性能更好的框架,是不是意味著,React 將要被淘汰了?所以有人就在群里問我,他覺得 Solid.js 性能比 React 更好,以后會不會取代 React?談談我的看法,來做一個深入

QYC28資訊網——每日最新資訊28at.com

現在有一種觀點聲音逐漸大了起來,認為市面上出現了許多比 React 性能更好的框架,是不是意味著,React 將要被淘汰了?QYC28資訊網——每日最新資訊28at.com

所以有人就在群里問我,他覺得 Solid.js 性能比 React 更好,以后會不會取代 React?QYC28資訊網——每日最新資訊28at.com

談談我的看法,來做一個深入一點的分析。QYC28資訊網——每日最新資訊28at.com

先說結論:Solid.js 要取代 React 很難。QYC28資訊網——每日最新資訊28at.com

雙向綁定

雙向綁定的概念并非一個新的詞,因此對應的解決方案 Signal ,也并非一個新的技術方案,他比 react 的存在要早得多。QYC28資訊網——每日最新資訊28at.com

Signal 是一個傳統技術方案。QYC28資訊網——每日最新資訊28at.com

恰恰相反,單向數據流反而是一種技術創新。QYC28資訊網——每日最新資訊28at.com

在雙向綁定的建立過程中,有一個理想的結果:我們可以輕易的知道數據與 DOM 節點的對應關系。如果這個理想的結果能夠輕松達成,那么通過數據驅動 UI 的形式來開發代碼將會變得非常容易。QYC28資訊網——每日最新資訊28at.com

但是真實情況是,數據與 UI 的對應關系很難建立。QYC28資訊網——每日最新資訊28at.com

雙向綁定采取的措施是遞歸遍歷監聽所有數據,依次建立與對應 UI 的綁定關系。這種解決方案所花費的成本主要體現在對數據的處理上。QYC28資訊網——每日最新資訊28at.com

他面臨兩個問題。QYC28資訊網——每日最新資訊28at.com

一是數據的變化需要監聽,但是某些數據類型的監聽在實現上有難度。QYC28資訊網——每日最新資訊28at.com

以數組為例,在以前的 vue 版本中,Object.defineProperty() 因為無法監聽數組長度的變化,導致 vue 不得不重寫數組方法QYC28資訊網——每日最新資訊28at.com

即便如此,由于改變數組內容的方式實在有點多,要把數組設計成響應式數據反而會導致更多的性能損耗。因此 Vue 不得不提供更多的其他的方式來監聽數組的變化。QYC28資訊網——每日最新資訊28at.com

比如 forceUpdate,比如大量的 Watcher,還有性能損耗更嚴重的 Deep Watcher。QYC28資訊網——每日最新資訊28at.com

另一個問題就是數據的層級與變化問題。QYC28資訊網——每日最新資訊28at.com

數據層級越深,我們想要深度監聽,就得使用遞歸的方式。當數據發生變化時,部分數據與 UI 的綁定關系需要重新建立「在 vue 中,就是重復依賴收集的過程」,如果數據量過大,或者數據變化頻繁,就會有性能風險。QYC28資訊網——每日最新資訊28at.com

因此 vue 官方文檔也會建議大家簡化數據層級,減少深度監聽的成本。QYC28資訊網——每日最新資訊28at.com

基于這兩個原因,導致了 vue1.x 的時候,不敢過于大聲宣稱自己性能更好。QYC28資訊網——每日最新資訊28at.com

為什么我要說 React 的解決方案是一種創新呢?QYC28資訊網——每日最新資訊28at.com

原因是他打破了傳統的雙向綁定監聽數據的思路,放棄關注數據,從而繞開了上面的問題。QYC28資訊網——每日最新資訊28at.com

react 把所有的精力都放在了 UI 層。使用我們現在熟知的 diff 算法,當數據發生變化時,react 會創建一個新的虛擬DOM樹,與之前的樹做對比,找出需要改變的元素。QYC28資訊網——每日最新資訊28at.com

這樣的好處就是完美繞開了所有的數據類型、數據復雜度、依賴收集等一系列問題,react 不僅不用頭疼某些類型監聽不到,也不需要擔心數據量太大導致更多的性能問題。QYC28資訊網——每日最新資訊28at.com

因此在 vue2.x 的版本中,也部分借鑒了虛擬DOM的解題思路來緩解 1.x 在數據側的壓力。QYC28資訊網——每日最新資訊28at.com

從總體思路上來說,vue 的主要壓力在于處理數據,react 的主要壓力在于處理 UI。QYC28資訊網——每日最新資訊28at.com

react 不建立數據與 UI 的對應關系,那么也就意味著另外一個壓力的產生,那就是當數據發生變化時,react 并不知道哪一個 UI 發生了變化,于此同時 react 為了保持自己對于 JavaScript 的弱侵入性,也沒有在 setState 上進行任何魔改,例如綁定當前上下文從而得知具體哪個組件的 state 發生了變化。QYC28資訊網——每日最新資訊28at.com

如果進行了這個魔改,diff 的壓力會小一些。QYC28資訊網——每日最新資訊28at.com

因此,每一次的 state 變化,都是整棵 DOM 樹的 diff,這也成為了現在其他框架在輿論宣傳上攻擊 react 性能不好的重要手段和依據,也是許多人覺得 react 必將被取代的重要原因。QYC28資訊網——每日最新資訊28at.com

從解決方案來說,雙向綁定方案「例如 vue,solid」的努力方向,在于如何降低數據側的性能壓力。QYC28資訊網——每日最新資訊28at.com

而 react 的努力方向,在于如何減少 UI diff 的性能壓力。QYC28資訊網——每日最新資訊28at.com

Solid 的底氣在哪?

后來 Vue3 宣傳自己性能高于 react 的聲音逐漸開始大起來了。原因就在于 Proxy 的出現。QYC28資訊網——每日最新資訊28at.com

defineProperty 在監聽數據上有不少缺陷,因此基于此來實現響應式數據壓力確實很大,也會給使用者在數據側帶來不小的心智負擔。而 Proxy 在很大程度上解決了這個問題。QYC28資訊網——每日最新資訊28at.com

Proxy 能夠監聽數組的變化,能夠監聽刪除對象字段的變化... 于是 Vue3 的底層實現,在數據側的代碼會簡潔很多,并且與此同時,Vue 的后續版本,也可以徹底放棄虛擬 DOM 來進一步提高自己的運行性能。QYC28資訊網——每日最新資訊28at.com

因此,基于 Proxy 來實現雙向綁定成為了許多框架的選擇。這也使得許多框架有了冒頭的理由和機會,Solid 的底氣也來自于此。QYC28資訊網——每日最新資訊28at.com

但是,依然有一個問題沒有解決。QYC28資訊網——每日最新資訊28at.com

那就是深度監聽仍然需要遞歸。當數據量很大的時候,依賴追蹤的壓力也會逐漸變大。QYC28資訊網——每日最新資訊28at.com

當你的項目比較輕量的時候,你能夠獲得很強的性能體驗。但是當你的項目變得越來越大,全局數據變得越來越復雜,層級越來越深,他的性能壓力也會逐漸變大。QYC28資訊網——每日最新資訊28at.com

當然,通常情況下,我們的大多數項目也達不到這個級別。QYC28資訊網——每日最新資訊28at.com

React 項目的性能表現

React 的性能壓力主要來源于 UI 側的 diff。QYC28資訊網——每日最新資訊28at.com

當項目變得越來越大,全局狀態里的數據越來越復雜。UI 側的 diff 壓力會越變越大嗎?QYC28資訊網——每日最新資訊28at.com

答案是:不會。QYC28資訊網——每日最新資訊28at.com

這是一個很有意思的思考。假如我有一個超大型的項目,一共有 3000 個頁面,似乎從理論的角度來說,UI diff 的壓力也會增加到 3000 個頁面的量級,但是事實上我們永遠只會在可視區域里展示一個頁面。也就是說,就算你的項目體量非常大,但是我們只會渲染一個頁面。QYC28資訊網——每日最新資訊28at.com

虛擬 DOM 的 diff 壓力,也只會限制在一個頁面的量級,這個壓力不會隨著項目體量的增加而增加。這個前提,實際上就已經表明了 React 的性能不會差到哪里去。QYC28資訊網——每日最新資訊28at.com

因此在實踐中,其實我們也不太需要過多的關注 react 的性能問題,哪怕是在 Fiber 架構出來之前,也不需要過多的關注。QYC28資訊網——每日最新資訊28at.com

而有意思的是,在許多文章中為了體現 solid.js 擁有巨大的性能優勢,往往會構建一個實踐中幾乎不存在的場景,例如渲染一萬個數據的列表比比誰花的時間更少。QYC28資訊網——每日最新資訊28at.com

然而事實上,即使我們不使用任何框架,就用原生 JavaScript 來渲染一萬條數據,也會采用虛擬列表的方式進行優化才能確保相對流暢不卡頓。QYC28資訊網——每日最新資訊28at.com

我們一定要明白,任何框架的性能都是不可能突破原生 JavaScript 的。QYC28資訊網——每日最新資訊28at.com

react 性能瓶頸

高頻率的交互往往會導致明顯的性能問題。QYC28資訊網——每日最新資訊28at.com

例如表單輸入時,我們期望內容的任何變化都有對應的 UI 響應,實踐項目中容易出現明顯的卡頓和延遲。常規的優化手段是使用防抖。QYC28資訊網——每日最新資訊28at.com

當然,在 antd 的 Form 組件也使用了將數據下放到每一個 Item 的方式來優化性能,store 中用 useRef 存儲數據而不是 useState,antd 內部為每個 Form.Item 定義了 forceUpdate 來強制更新 Item UI。QYC28資訊網——每日最新資訊28at.com

又例如拖拽/resize等事件。此時我們只需要通過操作原生 DOM 的方式來實現對應的邏輯即可。從而繞開高頻率的 diff 邏輯QYC28資訊網——每日最新資訊28at.com

這些性能瓶頸,大概率在 vue 和 Solid 中,也會存在。解決問題的思路也相差不大。QYC28資訊網——每日最新資訊28at.com

事實上,原生 DOM 本身在高頻交互上也存在明顯的性能瓶頸。因此許多前端項目不得不采用拋棄 DOM 渲染的方式來完成整個項目。但是這些項目我們仍然可以結合 react 來完成,例如著名的前端項目 Figma,或者國內有的團隊使用 react + skia 的方式來完成一些對性能要求很高的項目。QYC28資訊網——每日最新資訊28at.com

一個好的思路是,不要試圖用框架解決所有事情,而是讓他解決他擅長的事情。QYC28資訊網——每日最新資訊28at.com

小痛點

在使用 vue 時,我們常常需要警惕對數據進行一些操作時,讓數據失去響應性。在 Solid 中同樣如此。QYC28資訊網——每日最新資訊28at.com

Solid 的官方文檔案例中有這樣一段代碼。QYC28資訊網——每日最新資訊28at.com

const CountingComponent = () => {  const [count, setCount] = createSignal(0);    const interval = setInterval(  () => setCount(c => c + 1),  1000 ); onCleanup(() => clearInterval(interval));  return <div>Count value is {count()}</div>;};

當我們使用 createSignal 定義了一個響應式數據時,此時返回的 count,并不是一個數據,而是一個獲取數據的方法,注意這種差別。QYC28資訊網——每日最新資訊28at.com

在使用中,我們必須以執行該方法的形式來當成數據使用。如果 JSX 中有多處使用了該數據,我們也必須以執行該方法的形式來當成數據使用,count() 而不是 count。QYC28資訊網——每日最新資訊28at.com

如果我使用一個變量來緩存他的執行結果,然后使用該變量嵌入 JSX 中使用,該數據就會失去響應性。QYC28資訊網——每日最新資訊28at.com

var c = count()// 失去響應性<div>Count value is {c}</div>;

這里存在的問題就是語義與語法的錯位,讓我覺得不太舒服。QYC28資訊網——每日最新資訊28at.com

vue3 實際上也存在類似的問題,他為了避免這種語義與語法的錯位,分別采用了 ref 來監聽基礎數據類型, reactive 來監聽引用數據類型,雖然在 ref 的使用上任然需要借助 .value 來達到響應性,但好在實踐項目中單獨把基礎數據類型作為響應式數據的場景非常少。QYC28資訊網——每日最新資訊28at.com

也就是說,在解決這個問題上,反而 vue3 比 solid 更加優雅,當然,即便如此,在 vue3 中,一些操作也會讓數據失去響應性,例如解構,這是我們在學習的時候需要特別注意的地方。QYC28資訊網——每日最新資訊28at.com

react hooks 的痛點,閉包。QYC28資訊網——每日最新資訊28at.com

react 常常因為閉包問題,被各種攻擊。認為這是 react 的缺陷。如果你沒有掌握好閉包,視閉包為洪水猛獸,你多半也會認同這樣的說法。QYC28資訊網——每日最新資訊28at.com

因為從表現結果上來看,閉包帶來的緩存問題確實會導致使用者在理解上存在很多疑問。然而事實上,閉包問題不是 react 的問題,而是 JavaScript 本身的特性,閉包是學習 JavaScript 本應該掌握好的基礎之一,只不過很多前端開發沒有做到而已。QYC28資訊網——每日最新資訊28at.com

新人朋友估計在面試時,也常常被閉包相關的面試題虐哭 ~QYC28資訊網——每日最新資訊28at.com

react 提供了一個實踐場景,讓我們能夠直面閉包帶來的困擾,從而對閉包更加有掌控度,我認為這反而應該成為 react 的優勢之一,而不是痛點。QYC28資訊網——每日最新資訊28at.com

但是 vue3 和 solid 都在極力的避免讓開發者感受到閉包的存在,甚至把這種行為當成自己的優勢來大力宣傳,從我個人的角度來說,我并不贊同這樣的觀點,因為我們終究是要理解并掌握閉包的呀,對吧。QYC28資訊網——每日最新資訊28at.com

跨平臺

Solid 為了極致的性能體驗,完全棄用了虛擬 DOM,也就意味著,他放棄了跨平臺的特性。只把主要精力集中在 web 項目上。也就是說,他的全局生態建設,永遠也趕不上 reactQYC28資訊網——每日最新資訊28at.com

到目前為止,React 已經把觸手伸向了后端開發... 已經不滿足簡單的服務端渲染了,甚至還想要連接數據庫...QYC28資訊網——每日最新資訊28at.com

這也是 Solid 無法取代 react 最重要的原因。QYC28資訊網——每日最新資訊28at.com

我們也可以自己擴展 react 的生態。比如在我的 2d 可視化課程中,我們基于 canvas 封裝了一套類 DOM 的渲染引擎,然后接入 react-reconciler,就能輕松得到一個 react-echarts 的圖表組件,在使用層還是 react 組件,但是在底層已經被我瞧瞧的把 DOM 換成了 canvas,或者 webGPU... ,此時,我的項目性能,將會遠超 Solid.QYC28資訊網——每日最新資訊28at.com

總結

雙向綁定是一種傳統的解決方案,與之相對比,在前端領域 react 的解決方案是一個巨大的創新。單向數據流,Diff算法,雙緩存策略,優先級隊列,任務中斷,瀏覽器空閑時間,并發,函數式編程,自定義hook... 等等許多概念都極大的擴展了前端開發的技術視野。QYC28資訊網——每日最新資訊28at.com

并不確定 react 是否借鑒了其他領域的方案,認真看過我 JavaScript 核心進階的同學就應該知道,Fiber 架構在很大程度上借鑒了 V8 垃圾回收的底層機制。QYC28資訊網——每日最新資訊28at.com

而 Solid 作為模仿者,與 React 相比,他并沒有什么突出的優勢,也沒有什么技術和理念上的創新。他只是滿足了部分前端開發對于雙向綁定 + 函數式的美好愿景而已,至于 vue 和 angular 最終都會采用 Signal 重構底層代碼,那只不過是因為他們本身從一開始就是雙向綁定的基因。QYC28資訊網——每日最新資訊28at.com

因此在做技術選型時,任何一個成熟的前端架構師都沒有理由放棄 react 而選擇 Solid,無論是從性能上考慮,還是從生態上考慮,理由都不夠充分,Flutter 尚且做不到取締 React Native,Solid 要走的路還很長。QYC28資訊網——每日最新資訊28at.com

而有的人寫文章聲稱 Solid 比 React 還 React,Solid 教 React 寫函數式,降維打擊... 那只是常規的宣傳用語,當不得真。QYC28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-34652-0.html雙向綁定與單向數據流之爭,Solid會取代React嗎

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 我們一起聊聊業務定制型異地多活架構設計

下一篇: RabbitMQ高級之失敗重試機制(含源碼)

標簽:
  • 熱門焦點
  • 從零到英雄:高并發與性能優化的神奇之旅

    作者 | 波哥審校 | 重樓作為公司的架構師或者程序員,你是否曾經為公司的系統在面對高并發和性能瓶頸時感到手足無措或者焦頭爛額呢?筆者在出道那會為此是吃盡了苦頭的,不過也得
  • 每天一道面試題-CPU偽共享

    前言:了不起:又到了每天一到面試題的時候了!學弟,最近學習的怎么樣啊 了不起學弟:最近學習的還不錯,每天都在學習,每天都在進步! 了不起:那你最近學習的什么呢? 了不起學弟:最近在學習C
  • 使用AIGC工具提升安全工作效率

    在日常工作中,安全人員可能會涉及各種各樣的安全任務,包括但不限于:開發某些安全工具的插件,滿足自己特定的安全需求;自定義github搜索工具,快速查找所需的安全資料、漏洞poc、exp
  • 雅柏威士忌多款單品價格大跌,泥煤頂流也不香了?

    來源 | 烈酒商業觀察編 | 肖海林今年以來,威士忌市場開始出現了降溫跡象,越來越多不斷暴漲的網紅威士忌也開始悄然回歸市場理性。近日,LVMH集團旗下蘇格蘭威士忌品牌雅柏(Ardbeg
  • 消費結構調整丨巨頭低價博弈,拼多多還卷得動嗎?

    來源:征探財經作者:陳香羽隨著流量紅利的退潮,電商的存量博弈越來越明顯。曾經主攻中高端與品質的淘寶天貓、京東重拾&ldquo;低價&rdquo;口號。而過去與他們錯位競爭的拼多多,靠
  • 年輕人的“職場羞恥感”,無處不在

    作者:馮曉亭 陶 淘 李 欣 張 琳 馬舒葉來源:燃次元&ldquo;人在職場,應該選擇什么樣的著裝?&rdquo;近日,在網絡上,一個與著裝相關的帖子引發關注,在該帖子里,一位在高級寫字樓亞洲金
  • 攜眾多高端產品亮相ChinaJoy,小米帶來一場科技與人文的視聽盛宴

    7月28日,全球數字娛樂領域最具知名度與影響力的年度盛會中國國際數碼互動娛樂展覽會(簡稱ChinaJoy)在上海新國際博覽中心盛大開幕。作為全球領先的科
  • 四年持續更迭堅持探索行業無人之境,HarmonyOS 4帶來五大升級多項創新

    除了華為每年新發布的旗艦手機系列,上億花粉更加期待鴻蒙系統每次的跨版本大更新。8月4日,HarmonyOS 4于HDC 2023正式發布,這也是該系統歷經四年的再
  • 2納米決戰2025

    集微網報道 從三強爭霸到四雄逐鹿,2nm的廝殺聲已然隱約傳來。無論是老牌勁旅臺積電、三星,還是誓言重回先進制程領先地位的英特爾,甚至初成立不久的新
Top 主站蜘蛛池模板: 和硕县| 永修县| 海林市| 遂平县| 左云县| 五指山市| 北海市| 稻城县| 铜鼓县| 岫岩| 云南省| 博乐市| 来宾市| 房产| 蓬莱市| 泰兴市| 宜章县| 清水河县| 衡阳市| 阳江市| 宜川县| 克拉玛依市| 清流县| 上饶市| 阳西县| 霍山县| 浦东新区| 杭州市| 延吉市| 湖口县| 盐山县| 太仆寺旗| 双牌县| 大名县| 大化| 平武县| 噶尔县| 岱山县| 广宗县| 崇明县| 汝城县|