跟著官方文檔能學懂React Hooks就怪了

大家好,我是若川。今天分享一篇關于「React?Hooks」的好文。歡迎點擊下方卡片關注我。

以下是正文~


回想下你入門Hooks的過程,是不是經歷過:

  1. 類比ClassComponent的生命周期,學習Hooks的執行時機

  2. 慢慢熟練以后,發現Hooks的執行時機和生命周期又有些不同。比如componentWillReceiveProps對應哪個Hooks

  3. 感到困惑,去搜一些Hooks原理層面的文章閱讀

作為一個API,不該簡簡單單、可可愛愛的照著文檔調用就行么,Hooks為什么這么難?

React官方也發現了這個問題,在React要重寫文檔了講到,React要基于Hooks重寫文檔。

本文主要包括2方面內容:

  1. 解釋Hooks難學的原因

  2. 給出學習Hooks的建議

React的底層架構

可以用一個公式概括React

const?UI?=?fn(state);

視圖可以看作狀態經過函數的映射。

用戶與界面的交互,可以看作這個公式的不斷執行。

這個公式太精簡了,沒有解釋state(狀態)從哪兒來,我們擴展下:

const?state?=?reconcile(update);
const?UI?=?fn(state);
  1. 用戶交互產生update(更新)

  2. update經過reconcile步驟計算出當前應用的state

  3. fnstate映射為視圖變化(UI)

我們給fn起個名字:commit

const?state?=?reconcile(update);
const?UI?=?commit(state);

那么update在哪里產生呢?當然來自于用戶交互,比如:點擊事件。

所以React的底層架構可以簡化為三步:

  • 用戶交互產生update

  • state = reconcile(update);

  • UI = commit(state);

了解了底層架構,我們再來看通過類比ClassComponent學習Hooks會帶來的問題。

生命周期函數的抽象層級

我們已經有了完整的驅動視圖更新的底層架構,開發者該怎么操作這套架構呢?

可以用計算機的抽象層級來類比:

高層:應用程序
中層:操作系統
底層:計算機組成架構

對應React

高層:應用程序?????? ClassComponent生命周期
中層:操作系統???????介入架構的API
底層:計算機組成架構? React底層架構

可以看到,生命周期函數屬于抽象程度比較高的層次。這么設計也是為了讓開發者更容易上手React

設想一個Vue2開發者要轉React技術棧,只需要類比Vue的生命周期來學習React的生命周期就行了。

這一切在Hooks到來前都沒問題,然而......

Hooks的抽象層級

Hooks屬于中等抽象層級。也就是說,Hooks直接介入底層架構的運行流程。

高層:應用程序???????
中層:操作系統?????? Hooks
底層:計算機組成架構? React底層架構??????

當我們用生命周期函數來類比Hooks時,其實是用高抽象層級的事物來描述低抽象層級的事物。

動物 --> 哺乳動物 --> 牛 --> 奶牛

對于一個只見過奶牛,再沒見過其他動物的人,你怎么向他解釋哺乳動物是啥?

正是由于抽象層級的不對稱,造成通過生命周期函數類比學習Hooks會遇到問題。

該怎么學Hooks

既然Hooks屬于中等抽象層,離底層很近,那么更好的學習方式是通過底層向上學習。

祭出我們的三步公式:

  • 用戶交互產生update

  • state = reconcile(update);

  • UI = commit(state);

對照公式,我們來講解幾個常見hook的工作流程:

useState

舉個例子:

function?App()?{const?[state,?updateState]?=?useState(0);return?<div?onClick={()?=>?updateState(state?+?1)}></div>;
}

useState返回值數組包含:

  1. 保存的state

  2. 改變state的方法updateState

對照公式,state屬于公式步驟2計算得出的:

  • state = reconcile(update);

此時視圖還沒有更新。

用戶點擊div觸發updateState,對應公式步驟1:

  • 用戶交互產生update

所以調用updateState能開啟底層架構的三步運行流程。

reconcile計算出state后就會進入第三步:

  • UI = commit(state);

最終渲染視圖。

useEffect

舉個例子:

useEffect(doSomething,?[xx,?yy])

useEffect的回調函數doSomething在第三步執行完成后異步調用:

  • UI = commit(state);

所以在doSomething函數內部能獲取到完成更新的視圖。

第二個參數[xx, yy]作為依賴項,決定了doSomething是否會被調用。

useLayoutEffect

不同于useEffect在第三步執行完成后異步調用,useLayoutEffect會在第三步執行完UI操作后同步執行。

useRef

以上例子可以看到,useStateuseEffect分別在三步流程的不同步驟被觸發,他們的觸發時機是確定的。

那么這三個步驟如何交流呢?通過useRef

useState作用于第一、二步,useLayoutEffect作用于第三步,useEffect作用于第三步完成后。

使用useRef,就能達到在不同步驟間共享引用類型數據的目的。

可以看到,React為底層架構三步工作流程的每一步提供了對應的hook,同時提供了串聯這三步工作流程的hook

開發者只需要根據業務需要,通過基礎Hooks組裝出自定義hook,就能在底層架構運行流程的各個時期運行邏輯。

自底向上學習是本末倒置么?

有同學會反駁:之前學React得學生命周期函數的執行時機,現在學Hooks得學底層架構運行流程。難道不是本末倒置,更復雜了么?

其實不然。我問你幾個問題:

  1. componentWillReceiveProps為什么被標記為unsafe

  2. getDerivedStateFromProps用過么?

  3. this.setState是同步還是異步的?

這些和生命周期函數相關的問題一點都不簡單!很多用了幾年React的前端不一定回答的上。

作為高層次抽象,生命周期函數隱藏了太多實現細節。同時React又太靈活,不像Vue通過模版語言限制了開發者的操作。

結果就是:不同React開發者寫出各種奇奇怪怪的ClassComponent

反觀通過底層架構運行流程學習Hooks

  • 底層架構運行流程就是React的絕對真理,不會隱藏更多抽象

  • Hooks的寫法規范限制了開發者的奇葩操作

這里唯一的問題,就是缺少一份從底層出發的文檔。這也是官方要重寫文檔的初衷。

對于熟練使用React的開發者,在官方新文檔出來前,可以參考React技術揭秘[1](點擊閱讀原文)學習。

這里再提供些其他視角聊Hooks的文章:

  • 理念層面:代數效應與Hooks[2]

  • 微觀(代碼)層面:所有常見Hooks的源碼實現[3]

參考資料

[1]

React技術揭秘: https://react.iamkasong.com/

[2]

代數效應與Hooks: https://react.iamkasong.com/process/fiber-mental.html

[3]

所有常見Hooks的源碼實現: https://react.iamkasong.com/hooks/structure.html

最近組建了一個江西人的前端交流群,如果你也是江西人可以加我微信 ruochuan12 拉你進群。



·················?若川出品?·················

今日話題

vue-devtools工具中可以「根據組件直接打開對應文件」,多少人知道或者用過呢。

一個愿景是幫助5年內前端人走向前列的公眾號

可加我個人微信 ruochuan12,長期交流學習

推薦閱讀

我在阿里招前端,我該怎么幫你?(現在還能加我進模擬面試群)

如何拿下阿里巴巴 P6 的前端 Offer

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/276085.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/276085.shtml
英文地址,請注明出處:http://en.pswp.cn/news/276085.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

origin圖上顯示數據標簽_Origin(Pro):寒假都結束了,這個圖還是不會畫?【數據繪圖】...

寒假前給大家分享了一個圖&#xff0c;大家要的教程來了。【數據繪圖】好圖分享&#xff1a;寒假&#xff1f;不存在的&#xff01;?mp.weixin.qq.com繪圖思路&#xff1a;左側起止時間&#xff1a;散點圖&#xff0c;交換XY坐標軸&#xff1b;中間的連線為Drop Lines&#xf…

可以激發設計靈感的音樂_建立靈感庫以激發您的創造力

可以激發設計靈感的音樂I often find a lot of inspiration from work I see while scrolling social media. Saving art or images that inspire you allows you to build a library of resources to draw from whenever you’re working on a project.在滾動社交媒體時&#…

CentOS服務器上部署 oracle10gr2

1、下載Centos系統 Linux 鏡像文件。 推薦使用 CentOS5.4&#xff0c;下載地址&#xff1a;http://isoredirect.centos.org/centos/5/isos/i386/ 。這個是 32 位的 Linux 系統鏡像安裝文件&#xff0c;進入下載頁面后&#xff0c;如果是 DVD 光盤安裝&#xff0c;可以僅…

回顧:中網通訊網絡公司CEO羅與曾作客新浪嘉賓聊天室

轉載鏈接&#xff1a;http://tech.sina.com.cn/it/w/2001-11-09/91253.shtml 回顧&#xff1a;中網通訊網絡公司CEO羅與曾作客新浪嘉賓聊天室 大家好&#xff01;   主持人 &#xff1a;各位網友&#xff0c;下午好&#xff0c;今天我們請到了中網通訊網絡公司首席執行官羅…

form——驗證器Validators

form表單最大的作用就是驗證功能了&#xff0c;通過cleaned_data清洗&#xff0c;我們可以獲取傳來的值&#xff0c;通過參數、驗證器、自定義驗證方法&#xff0c;我們可以做到很多的驗證。 驗證器可用于在不同類型的字段之間重用驗證邏輯。validators有自帶的驗證器&#xff…

若川知乎問答:做前端感覺很吃力怎么辦?

前些日&#xff0c;我發了一篇推文《做前端感到越來越吃力了&#xff01;怎么辦&#xff1f;》&#xff0c;雖然是推廣&#xff0c;但閱讀量卻很高&#xff0c;推廣標題我們大概率不能改&#xff0c;感覺騙了大家&#xff0c;掉粉挺多人。寫稿的人可能就是看到了知乎這個問答。…

惠新宸php教程_惠新宸:首位國人加入PHP語言官方開發組

PHP開發組終于有了國人參與。最近&#xff0c; Laruence(真名惠新宸)加入了PHP語言官方開發組。 做PHP的同學一定很熟悉他了&#xff0c;他的博客風雪之隅(https://www.laruence.com/)發表了很多PHP源代碼分析和擴展開發相關的文章。他使用PHP擴展開發的PHP框架Yaf&#xff0c;…

d3 制作條形圖_停止制作常見的壞條形圖的5個簡單技巧

d3 制作條形圖Bar charts were probably the first type of chart you were ever introduced to in first grade. Their simplicity makes them a standard in visualizing data, but it is its accessibility that leads visualizers to often be careless with bar charts.乙…

SVN之使用原則

以下是我起草的部門SVN規范里原則的一部分。文件提交時要求必須提交注釋&#xff0c;注明相關修改信息&#xff0c;例如bug號、任務描述等。具體內容可采用約定或者設置的形式。你所提交的改變將體現給其他開發者&#xff0c;要明白提交的后果&#xff0c;提交之前要慎重。代碼…

圖解 React-router 源碼

大家好&#xff0c;我是若川。歡迎加我微信 ruochuan12今天分享一篇react-router源碼文章&#xff0c;深入理解路由的本質。微信預計閱讀只需8分鐘。點擊下方卡片關注我&#xff0c;或者查看源碼系列文章。閱讀源碼小 tips&#xff1a;從整體到細節&#xff0c;剛開始不要太拘泥…

青海西寧市大通縣非洲豬瘟疫區解除封鎖

中新網1月23日電 據農業農村部網站消息&#xff0c;農業農村部接到青海省農業農村廳報告&#xff0c;經評估驗收合格&#xff0c;青海省西寧市大通縣非洲豬瘟疫區解除封鎖。 大通縣非洲豬瘟疫情發生后&#xff0c;當地按照非洲豬瘟疫情應急預案和非洲豬瘟防治技術規范要求&…

回顧:中網飽經滄桑劫后余生 萬平國回首艱辛歷程

轉載鏈接&#xff1a;http://tech.sina.com.cn/i/c/75586.shtml 回顧&#xff1a;中網飽經滄桑劫后余生 萬平國回首艱辛歷程 http://www.sina.com.cn 2001年07月12日 13:25 財經時報   “最早的聊天室是我們做的、最早的檢索也是中網公司的、中網公司也是最早做電子商務的數…

android 輔助功能_輔助功能簡介

android 輔助功能Accessibility may be more than a moral imperative to ensure products are inclusive of more people who already experience barriers in daily life — it has a very practical outcome, benefiting everyone including the person with the disability…

【columnstore】mariadb columnstore 數據遷移

通過cpimport傳輸遷移&#xff1a; 官方文檔&#xff1a;https://mariadb.com/kb/en/lib...步驟&#xff1a; 1.導出庫中表的表結構&#xff0c;不要數據 # mysqldump -h 127.0.0.1 -uroot -p -P 4066 --skip-lock-tables test -d > test.sql 2.nc將文件傳輸至目標機器192.…

我有一個夢想

我有一個夢想&#xff0c;做一名大師傅&#xff0c;快樂地下廚房。土豆在我刀下歌唱&#xff0c;茄子在我鍋里跳舞。盤碗勺筷為我吶喊&#xff0c;油鹽醬醋為我喝彩。 我有一個夢想&#xff0c;讓土豆和茄子不再孤單&#xff0c;再加幾個青椒&#xff0c;做一盤地三鮮。還要少放…

推薦幾個前端大佬,真的厲害!

新的一年&#xff0c;推薦幾個還在堅持輸出的高質量前端公眾號&#xff0c;你想要的&#xff1a;React/Vue/Node/工程化/面試經驗等&#xff0c; 這里都有。不多說&#xff0c;直接看介紹。???? 程序員成長指北考拉&#xff0c;一個有趣且樂于分享的妹子&#xff0c;專注 N…

MySQL查詢結果導出到文件

轉載鏈接&#xff1a;http://eric-gcm.iteye.com/blog/1127734 選擇某些行作為需要的數據 SELECT id,dbname FROM index into outfile "d://aaa.txt"; 一般大家都會用 “SELECT INTO OUTFIL”將查詢結果導出到文件&#xff0c;但是這種方法不能覆蓋或者添加到已經創建…

RawCode-本身就是實驗性的8位類型

What if a type is created solely from the bit-representation of characters?如果僅根據字符的位表示形式創建類型怎么辦&#xff1f; This question was the basis of creating this experimental type. The type no longer uses familiar characters. ‘A’ looks like …

2d訪問沖突_Light | 基于環形分隔微鏡陣列的高速隨機訪問軸向聚焦系統

撰稿 | OSANJU 劉 揚01導讀近日&#xff0c;來自美國加州大學伯克利分校的Rikky Muller教授團隊&#xff0c;在國際頂尖學術期刊《Light: Science & Applications》發表了題為“A micromirror array with annular partitioning for high-speed random-access axial focus…

編譯出現ARM與THUMB沖突

問題&#xff1a; fatal error LNK1112: module machine type THUMB conflicts with target machine type ARM 解決方法&#xff1a; 在project-setting-linker-command line下&#xff0c;添加/machine:THUMB&#xff0c;如下&#xff1a; 轉載于:https://www.cnblogs.com/xfd…