作為一個寫了四年多 Vue 的前端開發者，在今年我私底下開始認真學習 React ，因為我覺得現在這環境，會的越多就代表你性價比越高，自然就更多公司要你，所謂 “技多不壓身” 嘛。

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

僅代表個人觀點，大佬們輕點噴。

Class 組件不看，只看 React Hooks

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

基本 Hooks 要學，高級 Hooks 先不學

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

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

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

源碼先不看

現階段我不會選擇去看 React 源碼的，因為我覺得我還沒將 React 用到極致。

按需學習 React

上面說了，很多 React 的高級知識點可以先不學，那什么時候學這些知識點呢？

其實光學理論是不足的，我們需要使用 React 去開發一些項目，這樣能鞏固我們的 React 知識，還能在實操的過程中去學習到一些高級的 React 知識點，這就是所謂的 按需學習，講人話就是：碰到 React 問題，去學對應的 React 知識來解決問題

沒項目咋辦？

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

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

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

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

所以我想到了一個好辦法：用 React 復刻熱門 Vue3 項目。

用 React 復刻熱門 Vue3 項目

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

那么我如果去 github 找一個 Vue3 的熱門項目，把他從零到一，用 React 實現一遍，是不是就能按需學習 React 了？

因為在這個過程中會涉及到 組件封裝、狀態管理、路由、權限管理、頁面渲染、樣式 等實戰知識點?。?！而你要用 React 去將這些功能全部實現一遍，在這個過程中你可以不斷地按需學習，不止能學 React，還能學一些額外的知識，比如 Typescript、pnpm、monorepo、tailwindcss 等等額外知識點。

就拿我自己來舉例，我最終是選了 vue-vben-admin 這個項目，因為它足夠火，也足夠復雜，我就是想挑戰自我，還有一個重要的點是他用的組件庫是ant-design-vue，而 React 也有 ant-design，它的技術棧是 Vue3 + Typescript + ant-design-vue + Pinia + pnpm + vite + tailwindcss。

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

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

圖片

圖片

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

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

圖片

圖片

其實復刻到一半，我就感覺我現階段所學的 React 足夠去應對一些普通的項目

手敲 React 工具庫

再說到 工具類，其實學習它是為了讓我的 React 知識進階，讓我能使用 React 去造輪子，想學習其實很簡單，去 github 上找幾個 star 數多的工具庫，然后拉代碼下來，接著自己從零到一照著敲一遍就行，就拿我自己舉例，我目前敲過的工具庫有：

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

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

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

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

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

圖片

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

圖片

無他，唯手熟爾

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

圖片