哪些組件寫外面？先寫路由還是先寫組件。對antd不是很熟

antd-pro 拉一個現成的項目下來看看，你就知道怎麼寫了

來一步一步說吧

第一步 setup你的項目，比如使用create-react-app

npx create-react-app your-project

第二步 建立的的項目結構，我寫個一般常見結構

...
/src
assets/ 素材 圖標一類
components/ ui組件
lib/
redux/ redux 的action reducers
hooks/ 自定義hook
helpers/ 幫助函數
utils/ 通用函數
pages/ 頁面組件
styles/ 全局css
App.js App組件
index.js React renderDom
Routes.js 應用路由
...

我一般喜歡把整體路由寫在src/Routes.js里，然後再App裡面引用它，然後再Routes文件裡面引用所有pages裡面的頁面級組件，如果你的路由非常多，可以單獨寫一個路由文件夾，分片引用。

第三步 其實就是安裝一些常用的東西

  • react-router-dom 實現路由
  • react-redux，redux 狀態管理

上面兩個一般是必須的，下面的也是經常用到的。

  • react-helmet 動態控制頁面meta信息
  • react-intl 國際化一些單位，日期等等
  • react-i18next，i18next 多語言支持

還有一些js項目常用的庫

  • lodash 難以用語言形容，總之就是基本上能幹大部分事
  • react date， momentjs 時間處理的庫，時區，日期等等
  • rxjs 事件處理的lodash

總結

既然你用了antd了，應該是ui定製化也不高，八成也是企業業務，其他的就不介紹了。應該是你用antd提供的基礎組件來構建你的業務組件，然後最終由page級組件調用業務組件，由路由引用。

最後呢，react怎麼用，就看看官方文檔吧，這個看上了一兩天就夠了，官網並不需要梯子。

這裡給一些通用的前端開發思想。

分析

首先在拿到一個前端項目的時候，先分析設計稿。把所有頁面上能公用的組件列出來，現在找不全不要緊，在以後開發的時候會慢慢發現哪些組件可以重用。有了這些分析好的組件之後，就能夠對以後的開發有一個計劃，清楚有多少個組件需要開發。開始開發時，有兩種方式，對於小一點的項目可以採用自上而下的方法，大一點的項目可以採用自下而上的方法，方便在寫組件時進行測試。

自上而下

自上而下的方法，從大局開始。首先開發頁面的布局組件 Layout，然後定下頭部、導航、測導航、內容和底部區域，再接著定下導航菜單 Navbar，藉助 React Router 把頁面的導航關係規劃好。接下來，從首頁開始（或者按項目進度、頁面緊急程度來確定先開發哪個頁面），把首頁各種內容區塊分配好，定義成 React 組件。接著再對每個部分更細一點的組件進行定義並實現，直到無法再分割。在開發過程中，就很可能發現一些組件可以拿出來定義成公共的，比如說同樣顯示的是列表，一個是文章，一個是評論，那麼就可以把這個列表定義成可復用的組件，用於控制下拉刷新、控制數量和分頁等。對於其它頁面也是如此

自下而上

自下而上則跟上邊的相反，先從組件入手，可以從首頁開始，然後從左到右，從上到下，把最小的組件單元定義好，比如按鈕、文本、圖標、頭像等，定義完之後，把首頁劃分成區塊，用定義好的組件去拼裝好這個區塊的內容，然後再用 CSS 控制這個區塊的布局，這樣像搭積木一樣，最終把一個頁面搭建成型，最後再去加上頁面之間的導航關係。

實現功能

上邊的開發邏輯是第一步，先把 UI 實現，過程中不考慮狀態和事件的處理，包括不限於用戶發起的事件、組件請求後端的數據等。因為寫 UI 一般是體力活，管理狀態是腦力活，要思考很多邏輯，分開會使得開發更有效率。在處理事件和狀態的時候，可能會發現有些組件設計的不合理，比如傳遞多層處理回調函數，或者不方便統一管理狀態，這樣就需要對組件進行重構，利用 children 減少組件的層級等。在實現功能時，可以按功能塊來實現，比如實現列表類的組件功能。也可以按頁面來實現，先實現首頁，再實現其他頁，這個就看公司要求的進度了，如果想快點看到效果就按頁面，如果考慮開發效率就按功能。

這些就是我做為前端工程師總結的一些開發套路，希望對你有幫助。

去github上使用 react 關鍵字進行搜索，看一下多星項目的react代碼實踐，再對照著寫一下，run一下，然後試著改寫一下，比如把class改成使用hooks，慢慢地照著寫，總歸是有收穫的，不要太糾結與原理什麼的，先寫溜了再去研究原理。

安利下自己搭的基於react生態相關技術的腳手架，結合代碼學習比較好。

sunnut/react-easy-start

推薦閱讀：
相关文章