重新回顧了一下react相關(guān)的知識

react簡單總結(jié)

image

比如基礎(chǔ)語法,JSX,組件化,用styled-componments寫js文件的css樣式
使用create-react-app腳手架構(gòu)建項(xiàng)目,安裝依賴,配置webpack
隨著項(xiàng)目的業(yè)務(wù)場景變化,開始進(jìn)行redux全局狀態(tài)管理和CSS3動(dòng)畫
數(shù)據(jù)管理中涉及異步/不可變性,需要中間件進(jìn)行處理,如thunk/Immntable.js
使用第三方UI框架,如Antd,Iconfont矢量圖標(biāo),公司也要求開發(fā)自己的Ui組件庫 現(xiàn)代化web開發(fā),已經(jīng)離不開前端路由React-Roouter調(diào)式面板使用chrome+react-devtools+redux-devtools應(yīng)用細(xì)節(jié)涉及生命周期函數(shù),Ref的操作DOM節(jié)點(diǎn) 還需要進(jìn)行自動(dòng)化測試jest+enzyme`
代碼和性能優(yōu)化上主要是ES6語法和AJAX請求,緩存,CDN等

redux的中間件

對比下thunk和saga

image

redux-thunk將原本的action對象,變成可執(zhí)行函數(shù)后交給reducer處理
所以把異步業(yè)務(wù)邏輯進(jìn)行封裝
相比與saga,后者就顯得格外的繁瑣,api異常冗雜
其結(jié)果實(shí)際上是并行生成了reducer處理action
目前基本的業(yè)務(wù)場景,使用react-redux即可,不建議一開始就使用saga
也不建議,最初就自己動(dòng)手封裝中間件

學(xué)習(xí)記錄的一些想法

推薦以下方式進(jìn)行總結(jié)

image

• 為知筆記
• 思維導(dǎo)圖
• 手繪/手寫線框圖

數(shù)字化的層面盡量使用gif動(dòng)圖演示
梳理后,寫成文章,用于分享回顧