????傳送門????
寒冬期前端準備總結---JS篇
寒冬期前端準備總結---瀏覽器篇
寒冬期前端準備總結---服務器和網絡篇
寒冬期前端準備總結---CSS篇
[寒冬期前端準備總結---框架篇]
寒冬期前端準備總結---算法篇
技術選型：考慮項目、團隊、框架發(fā)展程度和生態(tài)等問題
react-native和native和H5
* 頁面布局靈活度：H5 > react-native(flex) > native
* 內存：native < react-native/h5；rn/h5內存包含框架大小，可優(yōu)化
* 更新成本：H5 < react native < native,h5隨時更新，rn可以部分熱更新，native跟版本
* 用戶體驗：native > react native > h5
react native的UI組件為原生應用的一致，跨平臺且有熱更新能力
react native的熱更新（jsbundle的拆分和加載原理）
- react-native-update插件校驗app啟動時是否有新版本可以下載
- react-native-code-push 在rn中配置熱更新
- Vue和React對比
**相同**
* 兩者都只是JS的UI框架，路由和狀態(tài)管理等功能都是和框架分離的組件；數據的單向流動（單向下流綁定）
* 虛擬DOM：改變實際的DOM狀態(tài)花銷遠大于對一個JS對象的改變，計算新舊虛擬DOM的效率取決于diff算法的性能
* 都提供模塊化
**不同**
* 使用jsx語法（在js中寫html）；Vue使用HTML模板系統(tǒng)，便于原生項目遷移
* state對象在react應用中時不可以直接改變的，需要使用setState方法異步更新狀態(tài)；vue中的data參數都是數據的直接保存者，可以直接改變
* vue的組件可以全局注冊、局部注冊；react是import在模版中按需引用
* react更適合大型應用和更好的可測試性
* vue實例實現了事件接口，方便通信，小型項目可以不使用狀態(tài)管理
* 數據更新時，vue會從根節(jié)點渲染整個虛擬DOM，而react會從調用setState的這個組件開始渲染子虛擬DOM
生命周期：
* vue:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
* react:
getDefaultProps
getInitialState
~~(componentWillMount)~~
componentDidMount
shouldComponentUpdate
~~(componentWillUpdate)~~
** getDerivedStateFromProps** 新增
**render**
**getSnapshotBeforeUpdate** 新增
componentDidUpdate
~~ (componentWillUnmount)~~
componentUnmounted
- React的setState機制
* 每一次的setState調用會進入到react的state的更新隊列中，react會對這個隊列做合并處理也就是說setState的key值相同時會被合并
* 通過addEventListener和setTimeOut等回調方法中的setState會被同步執(zhí)行同步更新；在react原生方法OnClick、onChange或者生命周期中的setState方法會被react的state的更新機制合并后最后批量更新。
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
// 等同于
Object.assign({count: state.count + 1}, {count: state.count + 1});
// 被合并只執(zhí)行最后一次的set
- RN和flutter
RN中通過NativeModules調用原生定義的模塊化的方法，實現通信；
flutter是偏服務端語言的語言，一個無關UI的SDK
- React V16的改動
* 刪除了WillMount WillReceiveProps WillUpdate三個周期
* react V17 開啟異步渲染模式：組件的渲染可以被打斷，避免造成渲染過長，頁面無法交互等問題，比如不同的事件處理同時對數據更新，會造成渲染沖突，實現異步渲染的機制保證每一次的更新都能被捕捉到
* WillMount并不能保證渲染時數據已經請求完成，避免首屏渲染空白問題接口請求應該放在constructor
* 增加getDerivedStateFromProps靜態(tài)方法：用來監(jiān)聽新的props和setState以及強制重新渲染，返回新的state對象或者null
* 增加getSnapshotBeforeUpdate用在DidUpdate之前，render之后，可以保證此時讀取的DOM狀態(tài)與更新后的相同
image.png
- react組件類型
* pure component純組件，不會帶副作用，具體理解就是：shouldComponentUpdate不能重寫，組件直接根據props數據的變化來判斷是否刷新視圖，基本類型的數據改變會重新渲染，引用類型的數據只要引用地址不變就不會觸發(fā)視圖更新，可以用來解決react的渲染問題
* react函數式組件沒有生命周期，純返回dom，接收props參數，且新出的react hook增加只能在函數組件中使用的state功能
- vue 中圖片存放目錄
* assets文件夾中的圖片會被打包成base64的js文件，需要require引入相對路徑（CommonJS）或者import（ES6）進來
* static文件夾中的圖片不會，可以直接使用
- vue的computed和watch
* computed: 依賴基礎data數據，根據基礎數據計算得到的新數據，當基礎數據沒有變動時，會從緩存獲取結果
* watch：監(jiān)聽data數據的變化，回調處理，可以設置immediate(初始值處理)和deep
- vue組件通信
// 父向子
組件屬性 + props
// 子向父
this.$emit + @自定義事件
this.$parent.event 直接調用父組件方法
// 兄弟
bus.$emit + bus.$on
- vue子父組件的生命周期執(zhí)行順序（由外到內，再由內到外）
* 加載渲染：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMounted -> 子mounted -> 父mounted
* 子組件更新：父beforeUpdate -> 子beforeUpdate -> 子Updated -> 父Updated
* 父組件更新：父beforeUpdate -> 父Updated
* 銷毀：父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
- vue的data為函數的原因
當組件被多次重用時，如果數據都指向同一個data對象，會存在數據被同步修改（對象存儲引用地址）
- vue的props
prop屬性的值可以進行類型設定，讓父組件傳遞到子組件時類型更準確
- vue生命周期的實際應用
* beforeCreated:loading
* created: 異步請求
* mounted: 獲取DOM節(jié)點 ，可以進行視圖操作，但是不一定所有的字組件會被掛載，可以使用$nextTick回調處理
- 狀態(tài)管理對比（flux、redux、vuex）
flux的核心思想是數據和邏輯永遠是單向流動的，三部分：
* dispatcher負責分發(fā)時間
* store負責保存數據，同時響應事件并更新數據
* view負責訂閱store中的數據，并使用這些數據渲染相應的頁面
redux和vuex都是基于flux思想實現的
* redux只有一個全局的store，內置State對象，更新的邏輯也不是在store中，而是在reducer函數中
* redux沒有dispatcher的概念，使用reducer函數（返回一個新的state對象）
* vuex基于redux，使用mutation代替redux的reducer
react的mobx核心是通過action出發(fā)state的變化，進而觸發(fā)state的衍生對象，使用更靈活，observable、autorun、action等裝飾器
**redux**
- 核心對象：store
- 數據存儲：state
- 狀態(tài)更新提交接口：dispatch
- 狀態(tài)更新提交參數：帶type和payload的action
- 狀態(tài)更新計算：reducer
- 限制：reducer必須是純函數，不支持異步
- 特性：支持中間件
store dispatch action ；action 調用reducer修改state（同步）；subscribe注冊訂閱事件
**vuex**
- 核心對象：store
- 數據存儲：state
- 狀態(tài)更新提交接口：commit
- 狀態(tài)更新提交參數：帶type和payload的mutation
- 狀態(tài)更新計算：mutation handler
- 限制：mutation handler為非一步方法
- 特性：支持帶緩存的getter，用于獲取state經過某些計算后的值
store dispatch actions（異步）； actions commit mutation（同步）； mutation set state
- Virtual DOM和diff算法
渲染視圖的實現原理是diff+特定的DOM更新，和直接操作原生DOM的性能對比取決于節(jié)點數以及diff算法
當小數量的數據更新是Virtual DOM的性能可能會高于直接操作原生DOM（全部重新渲染）
* diff算法區(qū)別
react和vue（V3.0會更新diff算法??）都是同級比較，新舊NodeTree的頭尾四個指針，兩兩對比。
react是逐層比較，一層之后比下一層；vue是一層中的某個節(jié)點，先對比完節(jié)點下的所有子節(jié)點；也因此，react的渲染是根據當前組件為根節(jié)點渲染整個節(jié)點數，而vue是只重新渲染更新的節(jié)點，精準度更高
附 http://www.itdecent.cn/p/398e63dc1969
- webpack
構建流程
1 找到入口文件
2 并針對不同的模塊使用不同的loader，對模塊進行解析，并遞歸該模塊中用到的模塊，進行解析
3 解析完模塊后，得到模塊的內容以及他們之間的依賴關系
4 根據入口文件和模塊之間的依賴關系，組裝成包含多個模塊的chunk
5 把chunk轉化成單獨的js文件加入到輸出列表中
6 根據輸出配置，把文件內容寫入到文件系統(tǒng)中
loader在module.rules中配置，用于為模塊的解析增加規(guī)則
plugin在plugins數組中配置，用于擴展webpack的功能，比如html文件壓縮等
webpack的熱更新原理：應用在運行狀態(tài)下，不重新刷新就能更新、增加、移除模塊的機制
* 通過熱更新接口向webpack聲明模塊是否能夠熱更新，以及更新的前后進行的處理
* 接受熱更新，需要開發(fā)者自己再模塊被替換之前清除或保留必要的數據、狀態(tài)；并在模塊被替換后恢復之前的數據和狀態(tài)
* 在使用vue、react開發(fā)時，vue-loader插件已經幫我們做掉了這些事情
- webpack優(yōu)化前端性能
- 壓縮代碼
- 提取公共代碼
- 修改靜態(tài)資源的路徑為CDN上對應的路徑
- dll：把不常更改的js等靜態(tài)文件提前打包生成CDN連接，以外鏈腳本的方式引用到應用中
打包配置sourcemap：用于線上代碼debug
- 數據綁定
單向綁定：model的更新引起view視圖的變化
雙向綁定：同時view的更新引起model的數據更新，例如input組件的輸入、checkbox變更等
* MVC：
model包括數據格式、數據的基本操作方法
view即視圖
controllor包括注冊事件，監(jiān)聽用戶交互，調用model方法更新數據
**model驅動view**
* MVVM：
model只包括數據
view即視圖
view-model包括處理用戶交互、事件處理，model數據處理
**view和model沒有直接關聯，VM中間處理**
數據綁定的方法
* 發(fā)布者-訂閱者模式（backbone.js）：使用vm.set(‘property’, value)的方式更新數據
* 臟值檢查（angular）：臟值檢測對比數據有無更新，通過setInterval定時輪詢檢測數據變化，在特定的事件觸發(fā)時進入臟值檢測
* 數據劫持（vue）：通過Object.defineProperty()來劫持各個屬性的setter、getter，在數據變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調。Object.defineProperty(object，property，des)在對象上添加或修改一個屬性，des包括writable、value、get等
vue的數據綁定：設置數據綁定的入口，劫持Vue實例中的data，使用Observer監(jiān)聽數據的變更，并對Vue實例的el對象，通過Compile進行解析模版指令，最后利用Watcher來將前兩者關聯起來
* Observer：使用**Object.defineProperty**覆寫data屬性的setter、getter，實現對數據變更的監(jiān)聽，收集依賴，通過set擴展調用notity觸發(fā)更新
* Compile：解析模版指令，在每個指令對應的節(jié)點中實例化訂閱者Watcher，綁定更新函數，數據變更時通知更新函數，進而變更視圖
* Watcher：往data屬性中添加訂閱者watcher，data屬性通知數據變化時，調用自身的update方法，觸發(fā)Compile中綁定的回調，更新視圖
附：vue3.0的數據劫持使用es6 proxy
image.png
