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

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

Solid 作者從 React 中學到最重要的是什么?

來源: 責編: 時間:2023-11-30 09:30:17 283觀看
導讀大家好,我卡頌。前端界有句玩笑話 —— 「React 一點都不 react,Solid 才應該叫 React」。作為一款「借鑒了很多 React 特性」的前端框架,截止目前,Solid已經有 29.6kstar。顯然,他已經得到了社區的認可。前段時間,Solid的

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

大家好,我卡頌。hXh28資訊網——每日最新資訊28at.com

前端界有句玩笑話 —— 「React 一點都不 react,Solid 才應該叫 React」。hXh28資訊網——每日最新資訊28at.com

作為一款「借鑒了很多 React 特性」的前端框架,截止目前,Solid已經有 29.6kstar。顯然,他已經得到了社區的認可。hXh28資訊網——每日最新資訊28at.com

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

前段時間,Solid的作者「Ryan Carniato」在博文Thinking Locally with Signals[1]中提到 —— SolidReact中學到的最重要的東西,不是JSX虛擬DOM,而是一個被稱為「局部思考」(Locality of Thinking)的概念。hXh28資訊網——每日最新資訊28at.com

本文就來聊聊這個對前端開發影響深遠的理念。hXh28資訊網——每日最新資訊28at.com

局部思考是什么?

當我們新入職一家公司,在熟悉項目代碼階段,領導通常會分配給我們一些小需求,幫助我們快速熟悉項目代碼。hXh28資訊網——每日最新資訊28at.com

這個過程是如此自然,以至于我們都忽視了一個重要問題 —— 為什么在一個龐大的項目代碼庫中,即使不熟悉代碼,也能輕松修改一些小功能?hXh28資訊網——每日最新資訊28at.com

答案是 —— 「局部思考」理念在發揮作用。hXh28資訊網——每日最新資訊28at.com

「局部思考」是指你可以不看其他代碼,只通過一個組件的代碼就能理解它的行為。這種思考方式對代碼的可維護性和可讀性有著重大影響。hXh28資訊網——每日最新資訊28at.com

首先,在大型項目中,代碼的「可維護性」至關重要。如果每次修改都需要理解整個代碼庫,那么這個項目可能會很快變得難以維護。hXh28資訊網——每日最新資訊28at.com

其次,從「可讀性」的角度來看,如果代碼的可讀性好,那么新的開發人員可以更快地理解和開始他們的工作。hXh28資訊網——每日最新資訊28at.com

通過「局部思考」,可以使代碼更易讀、可維護性更高。試想,這不正是「使用框架開發」相比于「使用 jQuery 開發」的優勢么?至于框架的其他特性(比如虛擬DOM細粒度更新Hooks...)都是在「局部思考」的基礎上發展出來的。hXh28資訊網——每日最新資訊28at.com

可以說,「局部思考」是「框架開發」這種工作模式的基石。hXh28資訊網——每日最新資訊28at.com

如何實現局部思考

假設項目中有如下代碼,你能保證結果是true么:hXh28資訊網——每日最新資訊28at.com

const obj = {}someFunction(obj)// 結果是 true 么?console.log(obj.value === undefined)

要想知道結果,必須看someFunction函數的內部實現。如果項目中大量充斥了上面這樣的代碼,對可讀性、可維護性簡直是災難。hXh28資訊網——每日最新資訊28at.com

「局部思考」理念的提出就是為了解決上述問題。要實現「局部思考」,有四個重要因素:hXh28資訊網——每日最新資訊28at.com

  • 單向數據流
  • 讀寫分離
  • 顯式突變
  1. 組件隔離

單向數據流

數據應該只在一個方向上流動。這樣可以保證數據的來源和使用是一致的,使得代碼行為更可預測,減小了出現bug的可能性。hXh28資訊網——每日最新資訊28at.com

考慮如下Solid代碼,數據只從父組件流向子組件。子組件只讀取數據,而不能改變它:hXh28資訊網——每日最新資訊28at.com

// 父組件內const [count, setCount] = createSignal(0);<ChildComponent count={count()} />// 子組件內const ChildComponent = ({ count }) => {  // count是只讀的  return <div>{count}</div>}

讀寫分離

讀取數據和修改數據應該是兩個獨立的操作。這樣可以降低代碼的復雜度,使得閱讀和理解代碼更簡單。hXh28資訊網——每日最新資訊28at.com

考慮如下Solid代碼,SomeComponent通過title()讀取值,通過setTitle修改值。這種分離使得我們可以更好地理解狀態何時變化。hXh28資訊網——每日最新資訊28at.com

// [讀, 寫]const [title, setTitle] = createSignal("title");// `SomeComponent`不能改變`title`<SomeComponent title={title()} />// 現在`SomeComponent`可以更新title<SomeComponent title={title()} updateTitle={setTitle} />

在Svelte中,狀態(或者叫signal)只能「按值傳遞」,所以下面SomeComponent即使接收title作為props,也無法直接修改他。hXh28資訊網——每日最新資訊28at.com

要修改他,需要執行updateTitle方法(方法內部閉包中的title是signal,可以響應更新)。這也是一種「讀寫分離」的實現。hXh28資訊網——每日最新資訊28at.com

let title = $state("title")// `SomeComponent`不能改變`title`<SomeComponent title={title} />// 現在`SomeComponent`可以更新title<SomeComponent title={title} updateTitle={(v) => title = v} />

顯式突變

所有的數據變化應該是顯式的,而不是在背后默默發生。這樣更容易跟蹤數據的變化。考慮如下Solid代碼:hXh28資訊網——每日最新資訊28at.com

// 定義狀態const [count, setCount] = createSignal(0);// 顯式改變狀態setCount(count() + 1);

是不是一下就想到了React中的useState呢?沒錯,其實不止是useState,在ClassComponent的this.setState也是遵循同樣的原則。hXh28資訊網——每日最新資訊28at.com

組件隔離

每個組件應該只關心自己的狀態和邏輯,而不是其他組件的。這樣可以保證組件之間的獨立性,降低耦合度,使得代碼更易于維護。hXh28資訊網——每日最新資訊28at.com

總結

如果你覺得以上的介紹一點技術含量都沒有,那是再自然不過的事。因為這些原則都是React最基本的使用規范。hXh28資訊網——每日最新資訊28at.com

本文存在的意義,是闡述一個觀點 —— 這些規范之所以存在,是為了共同實現「局部思考」的理念。而這一理念,才是前端框架可維護性、可讀性的來源。hXh28資訊網——每日最新資訊28at.com

按照這個思路去思考,就能明白很多React特性的用意,比如:hXh28資訊網——每日最新資訊28at.com

  • 為什么函數組件替代了類組件。
  • 為什么會出現useEffect這個Hook。
  • 為什么ref不能跨函數組件傳遞。

這些特性的背后,都體現了「局部思考」的理念。hXh28資訊網——每日最新資訊28at.com

參考資料

[1]Thinking Locally with Signals:https://dev.to/this-is-learning/thinking-locally-with-signals-3b7h。hXh28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-35334-0.htmlSolid 作者從 React 中學到最重要的是什么?

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

上一篇: Python GUI 新手入門教程:輕松構建圖形用戶界面

下一篇: 優雅的springboot參數校驗,你學會了嗎?

標簽:
  • 熱門焦點
  • K8S | Service服務發現

    一、背景在微服務架構中,這里以開發環境「Dev」為基礎來描述,在K8S集群中通常會開放:路由網關、注冊中心、配置中心等相關服務,可以被集群外部訪問;圖片對于測試「Tes」環境或者
  • 讓我們一起聊聊文件的操作

    文件【1】文件是什么?文件是保存數據的地方,是數據源的一種,比如大家經常使用的word文檔、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存數據,它既可以保
  • 2023年,我眼中的字節跳動

    此時此刻(2023年7月),字節跳動從未上市,也從未公布過任何官方的上市計劃;但是這并不妨礙它成為中國最受關注的互聯網公司之一。從2016-17年的抖音強勢崛起,到2018年的&ldquo;頭騰
  • 消費結構調整丨巨頭低價博弈,拼多多還卷得動嗎?

    來源:征探財經作者:陳香羽隨著流量紅利的退潮,電商的存量博弈越來越明顯。曾經主攻中高端與品質的淘寶天貓、京東重拾&ldquo;低價&rdquo;口號。而過去與他們錯位競爭的拼多多,靠
  • AI芯片初創公司Tenstorrent獲三星和現代1億美元投資

    Tenstorrent是一家由芯片行業資深人士Jim Keller領導的加拿大初創公司,專注于開發人工智能芯片,該公司周三表示,已經從現代汽車集團和三星投資基金等
  • 超閉合精工鉸鏈 徹底消滅縫隙 三星Galaxy Z Flip5與Galaxy Z Fold5發布

    2023年7月26日,三星電子正式發布了Galaxy Z Flip5與Galaxy Z Fold5。三星新一代折疊屏手機采用超閉合精工鉸鏈,讓折疊后的縫隙不再可見。同時,配合處
  • 2299元起!iQOO Pad開啟預售:性能最強天璣平板

    5月23日,iQOO如期舉行了新品發布會,除了首發安卓最強旗艦處理器的iQOO Neo8系列新機外,還在發布會上推出了旗下首款平板電腦——iQOO Pad,其搭載了天璣
  • 質感不錯!OPPO K11渲染圖曝光:旗艦IMX890傳感器首次下放

    一直以來,OPPO K系列機型都保持著較為均衡的產品體驗,歷來都是2K價位的明星機型,去年推出的OPPO K10和OPPO K10 Pro兩款機型憑借各自的出色配置,堪稱有
  • 電博會與軟博會實現"線下+云端"的雙線融合

    在本次“電博會”與“軟博會”雙展會利好條件的加持下,既可以發揮展會拉動人流、信息流、資金流實現快速交互流動的作用,繼而推動區域經濟良性發展;又可以聚
Top 主站蜘蛛池模板: 曲麻莱县| 竹北市| 大安市| 界首市| 广汉市| 通海县| 阜平县| 富民县| 玉屏| 麻江县| 呈贡县| 城步| 兴城市| 东阳市| 金湖县| 蒲江县| 芮城县| 新疆| 门头沟区| 五河县| 襄城县| 沐川县| 湘潭市| 买车| 平乐县| 黔西| 铜鼓县| 冷水江市| 石城县| 左权县| 沛县| 平湖市| 蕲春县| 阿合奇县| 余庆县| 兴国县| 资中县| 通州区| 南安市| 凤阳县| 海口市|