要使用TypeScript模板創建react-app，建議使用yarn。接下來我主要以紗線為例。
然後在項目根目錄下創建壹個craco.config.js來修改默認配置。按需加載和定制主題
只是重新包裝壹下。所有的主題都在這裏配置。
這裏用React-router進行路由，同時也根據用戶角色做權限處理；只有當角色與路由允許的角色壹致時，才能訪問和顯示。
在新路由器下創建壹個新的indext.tsx來呈現頁面。
介紹Router/index.tsx
創建hasPermission.ts，如果頁面角色包含用戶的角色則返回true，渲染菜單和子頁時根據該值渲染頁面。
比如主頁，渲染子頁面的邏輯:
子頁面1下的頁面1無法在此顯示和訪問。如果直接輸入路線，也會訪問頁面。因為page1允許的角色是用戶，而我們的角色是管理員，所以不能顯示。
UseImmer解決了ReactHooks中賦值的性能問題，可以單獨更新壹個對象的壹個屬性。
上面的賦值方法也可以壹起寫，效果是壹樣的:
海鉤子是壹個React鉤子庫，致力於提供常用和高質量的鉤子。有很多鉤子組件，比如上面使用的usePersistFn。它的作用:在某些場景下，妳可能需要用useCallback來記憶壹個回調，但是內部函數必須頻繁重新創建，記憶效果不是很好，導致子組件的重復渲染。對於超復雜的子組件，重新渲染會影響性能。使用usePersistFn，可以保證函數地址永遠不會改變。海鉤子還是很強大的，還有很多強大的API。可以去官方文檔看壓力-web pack-plugin Terser-web pack-plugin。
同時打開袋子。
DevServer，壹個用於開發環境的域名代理。
為了加快打包速度，也可以考慮刪除antd-icons，單獨去iconfont網站，根據需要進行介紹。不然要花很多時間打包會員費。
dotenv-cli簡介
添加兩個開發環境配置文件:env.development和env.production
然後修改package.json中的啟動腳本:
現在，紗線開始或紗線形成將根據環境配置進行處理。
還有壹些細節需要調整，我們會盡力讓這個框架更加完善。
Github地址:/benzic/react-typescript-umi hooks-mobx
歡迎明星並發表評論。