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ǔ)庫（僅做了解）