作為一個寫了四年多 Vue 的前端開發(fā)者，在今年我私底下開始認(rèn)真學(xué)習(xí) React ，因?yàn)槲矣X得現(xiàn)在這環(huán)境，會的越多就代表你性價比越高，自然就更多公司要你，所謂 “技多不壓身” 嘛。

把這段時間是怎么學(xué)習(xí) React 的過程分享給大家，希望對大家有用。

僅代表個人觀點(diǎn)，大佬們輕點(diǎn)噴。

Class 組件不看，只看 React Hooks

很多人在說既然 React Hooks 出了，那還有必要看以前那種 Class 組件嗎？我覺得可以不看，優(yōu)先看 React Hooks，要跟上時代，React 官方自己都說 “全面擁抱 Hooks” ，所以我覺得只看 React Hooks 就行，也就是 React16.8 起的版本，React Hooks 都推出好幾年了，大部分 React 項(xiàng)目早就使用 React Hooks 了。

基本 Hooks 要學(xué)，高級 Hooks 先不學(xué)

一些比較基本的 React Hooks 可以先學(xué)（看視頻、看文檔都行），哪些基本的呢：

• useState
• useRef
• useEffect
• useMemo
• useCallback
• useContext

有了這些基本的 Hooks，可以保證最基本的頁面各種邏輯的運(yùn)行，至于其他的高級的 Hooks，可以先不學(xué)，等后面再按需學(xué)習(xí)（下面會講到）。

源碼先不看

現(xiàn)階段我不會選擇去看 React 源碼的，因?yàn)槲矣X得我還沒將 React 用到極致。

按需學(xué)習(xí) React

上面說了，很多 React 的高級知識點(diǎn)可以先不學(xué)，那什么時候?qū)W這些知識點(diǎn)呢？

其實(shí)光學(xué)理論是不足的，我們需要使用 React 去開發(fā)一些項(xiàng)目，這樣能鞏固我們的 React 知識，還能在實(shí)操的過程中去學(xué)習(xí)到一些高級的 React 知識點(diǎn)，這就是所謂的 按需學(xué)習(xí)，講人話就是：碰到 React 問題，去學(xué)對應(yīng)的 React 知識來解決問題

沒項(xiàng)目咋辦？

但是大部分人工作中都用不到 React 呀，咋辦呢？其實(shí)私底下也有項(xiàng)目做呀，github 上不是一大把嗎？所以我去 github 上找了一圈，發(fā)現(xiàn) github 上的 React 項(xiàng)目分成兩類：

• 項(xiàng)目類： 管理系統(tǒng)、官網(wǎng)、網(wǎng)頁項(xiàng)目居多，但是這些倉庫代碼都很舊，一般都是 3-4 年前的倉庫了。

• 工具類： 狀態(tài)管理庫、組件庫居多，這些倉庫往往代碼都比較新，而且更新很頻繁。

對于學(xué)習(xí) React，我的建議是：先學(xué)怎么用，再學(xué)怎么造，所以正確路線是 項(xiàng)目類 -> 工具類，但是這些 項(xiàng)目類 的項(xiàng)目倉庫都太老了，如果看這些倉庫學(xué)習(xí)的話，你可能學(xué)不到最新的知識。

所以我想到了一個好辦法：用 React 復(fù)刻熱門 Vue3 項(xiàng)目。

用 React 復(fù)刻熱門 Vue3 項(xiàng)目

React 的 項(xiàng)目類 倉庫都太老了，但是 Vue3 的 項(xiàng)目類 倉庫都很新啊?。?！

那么我如果去 github 找一個 Vue3 的熱門項(xiàng)目，把他從零到一，用 React 實(shí)現(xiàn)一遍，是不是就能按需學(xué)習(xí) React 了？

因?yàn)樵谶@個過程中會涉及到 組件封裝、狀態(tài)管理、路由、權(quán)限管理、頁面渲染、樣式 等實(shí)戰(zhàn)知識點(diǎn)?。?！而你要用 React 去將這些功能全部實(shí)現(xiàn)一遍，在這個過程中你可以不斷地按需學(xué)習(xí)，不止能學(xué) React，還能學(xué)一些額外的知識，比如 Typescript、pnpm、monorepo、tailwindcss 等等額外知識點(diǎn)。

就拿我自己來舉例，我最終是選了 vue-vben-admin 這個項(xiàng)目，因?yàn)樗銐蚧?，也足夠?fù)雜，我就是想挑戰(zhàn)自我，還有一個重要的點(diǎn)是他用的組件庫是ant-design-vue，而 React 也有 ant-design，它的技術(shù)棧是 Vue3 + Typescript + ant-design-vue + Pinia + pnpm + vite + tailwindcss。

所以我使用 React18 + Typescript + ant-design + Zustand + pnpm + vite + tailwindcss 去復(fù)刻它。

下面是 vue-vben-admin 的倉庫代碼和頁面：

圖片

圖片

到目前為止我用 React 復(fù)刻了一半吧~我將他取名為 React-Sunshine-Admin，下面是我復(fù)刻的頁面：

React-Sunshine-Admin倉庫地址： https://github.com/sanxin-lin/react-sunshine-admin

圖片

圖片

其實(shí)復(fù)刻到一半，我就感覺我現(xiàn)階段所學(xué)的 React 足夠去應(yīng)對一些普通的項(xiàng)目

手敲 React 工具庫

再說到 工具類，其實(shí)學(xué)習(xí)它是為了讓我的 React 知識進(jìn)階，讓我能使用 React 去造輪子，想學(xué)習(xí)其實(shí)很簡單，去 github 上找?guī)讉€ star 數(shù)多的工具庫，然后拉代碼下來，接著自己從零到一照著敲一遍就行，就拿我自己舉例，我目前敲過的工具庫有：

• Zustand： 一個 React 的超火的輕量級狀態(tài)管理工具，源碼其實(shí)只有幾十行

倉庫地址： https://github.com/pmndrs/zustand

• Shadcn-UI: 這是我最近在手敲的一個項(xiàng)目（順便學(xué)了 vitest 寫單元測試），它是一個 React 的超火的無頭組件庫，什么是無頭組件庫呢？我上篇文章有說

文章地址 點(diǎn)擊打開 ->：以后用 ElementUI、Ant-Deisgn 的前端只會越來越少

倉庫地址： https://github.com/shadcn-ui/ui

圖片

目前 Shadcn-UI 我還沒敲完，不過相信很快了~

圖片

無他，唯手熟爾

我一直相信這么一句話 無他，唯手熟爾，一件事情你做千遍萬遍，肯定能越來越強(qiáng)的，React 也一樣，你敲過的代碼越多，就會越厲害。

圖片