created at 2021-08-05 by gp6
- 環(huán)境搭建
cnpm i create-react-app -g
create-react-app react-admin --template typescript
cd react-admin
npm start
-
文件命名：
- .js / .jsx / .ts / .tsx
- 如果代碼用到了JSX變量探橱，文件名用.jsx或.tsx。
- 如果代碼沒有用到JSX，文件名用.js或.ts棉圈。
-
TypeScript
- 它是JS的超集镊辕，在TS環(huán)境可以兼容JS代碼（也就是你說可以ES5、ES6代碼）
- 在腳手架環(huán)境中（node+webpack），還做不到實時地對TS類型進行檢測逼肯。但每次運行項目時，卻可以做到對代碼的檢測桃煎。
- 所以在工作中篮幢，TS項目幾乎都用的是VScode來做開發(fā)（因為VScode這個編輯器內(nèi)置了TS檢測工具）。
- VScode只能.ts/.tsx文件進行類型檢測为迈。不能在.js/.jsx中寫TS代碼洲拇。
- 如何理解TS報紅的錯誤？它只是提示你類型錯誤了曲尸，但不影響代碼的正確編譯和運行。
create-react-app react-admin --template redux-typescript
create-react-app
# ES6環(huán)境（只能使用ES6語法男翰、默認不支持TS另患，使用redux、react-redux）
# 定義redux時蛾绎，參考store_backup代碼
# 使用redux數(shù)據(jù)時昆箕，可以用connect、useSelector租冠、useDispatch
create-react-app my-app1
# TS環(huán)境（TS和ES6都可以使用鹏倘、在這個環(huán)境使用redux、react-redux傳統(tǒng)流程）
create-react-app my-app2 --template typescript
# TS環(huán)境（只使用TS顽爹，在這個環(huán)境中使用 @reduxjs/toolkit纤泵、react-redux）
create-react-app my-app3 --template redux-typescript</pre>
簡單描述Redux傳統(tǒng)流程：
- 安裝redux，使用createStore(rootReducer镜粤、initState捏题、middleWares)創(chuàng)建根store
- 使用combineReducers({}) 合并多個子reducer
- 使用compose(applyMiddleWare(thunk), applyMiddleWare(logger))使用中間件，尤其是解決redux不支持異步action的問題肉渴。
- 如何創(chuàng)建子reducer呢公荧？function reducer(initState,aciton) {本質(zhì)上是一堆switch語句}，在編寫子reducer時同规，核心邏輯是深復制（immer）循狰，根據(jù)不同的case分支來修改子store（action={type,payload}是信號，像一封郵件）
- 在App.jsx中券勺，安裝react-redux這個庫绪钥，使用 ，React組件樹中有了store上下文朱灿。
- 在React組件中昧识，如果是16.8以前，只能使用 connect(mapState, mapDispatch)(Component)盗扒，然后在props上就能訪問這些store數(shù)據(jù)跪楞、以及那些修改store的action邏輯缀去。
- 在React組件中，如果是16.8以后甸祭，除了connect可以用缕碎，建議使用更好的 useDispatch、useSelector池户。
- 在傳統(tǒng)的redux架構(gòu)中咏雌，為了讓action更好地維護和復用，我們一般建議封裝action生成器方法校焦。
- 在傳統(tǒng)的redux架構(gòu)中赊抖，為了避免協(xié)同開發(fā)時大家濫用type或者type沖突，我們一般建議封裝一個type字典寨典。
簡單@reduxjs/toolkit的流程：
- 安裝@reduxjs/toolkit這個庫氛雪，使用configureStore({reducer,middleware})創(chuàng)建store。
- 使用createSlice({name,initialState,reducers,extraReducers})創(chuàng)建子reducer耸成，最后拋出子reducer給根store合并报亩。
- 使用createAsyncThunk('user/login', async (入?yún)?=>(await fetchLogin()))，給到createSlice.extraReducers中addCase添加異步成功狀態(tài)井氢，在成功狀態(tài)中直接修改子store弦追。這些由createAsyncThunk創(chuàng)建action方法，也要拋出花竞，給React組件進行觸發(fā)使用 dispatch(login(入?yún)?)劲件。
- 在App中，安裝react-redux左胞，使用注入上下文寇仓。
- 在React組件中，只能使用 @reduxjs/toolkit官方推薦的 useAppSelector來使用store數(shù)據(jù)烤宙、只能使用useAppDispatch來觸那些子store中拋出的action遍烦。
可視化開發(fā)
二維圖表
基于地圖的開發(fā)：百度地圖、高德地圖躺枕、騰訊地圖服猪、谷歌地圖
三維視覺
bizcharts 這是React版本的antv圖表（組件化寫法，要求會用）
ant-design-charts 自己做一些補充
echarts 是百度出品的可視化基礎(chǔ)庫（DOM寫法拐云，要求會用）
antv 是阿里出品的可視化基礎(chǔ)庫（使用難度較大罢猪，不建議使用）
highcharts 是國外開源的一個可視化基礎(chǔ)庫（僅做了解）
