與 Vue 相伴四年，終究還是沒抵住 React 的巨大誘惑

作者：林三心不學挖掘機 2024-08-30 08:53:24

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

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

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

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

Class 組件不看，只看 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 的倉庫代碼和頁面：

圖片