5組件化 組件化優(yōu)點(diǎn) 提高開發(fā)效率 方便重復(fù)使用 簡(jiǎn)化調(diào)試步驟 提升整個(gè)項(xiàng)目的可維護(hù)性 便于協(xié)同開發(fā) vue的缺點(diǎn) 1Vue不缺入門教程，可是很缺乏高階教程與文檔同樣的還有書籍2VUE不支持IE8 3生態(tài)環(huán)境差不如；React 官方也在極力推動(dòng)Hook的發(fā)展，并且近期也有了React準(zhǔn)備重寫文檔，更新后的文檔針對(duì)Hook的內(nèi)容肯定會(huì)更多，而且Vue在30版本出來后也使用了類似于React Hook的機(jī)制Composition API，這也是一個(gè)趨勢(shì)最近在用webpack4+react；vfor中key的作用vue組件的通信方式父子組件通信父子 props ，子父 $on$emit` 獲取父子組件實(shí)例 parent parentchildren Ref 獲取實(shí)例的方式調(diào)用組件的屬性或者方法 Provideinject` 官方不推薦使用，但是寫組件庫時(shí)很常用；數(shù)據(jù)量太大的話會(huì)卡頓 擴(kuò)展性 react 1 類式寫法api少，更容易結(jié)合ts 2 可以通過高階組件來擴(kuò)展 vue 1 聲明式寫法，結(jié)合ts比較復(fù)雜 2 需要通過mixin方式來擴(kuò)展 vuerouter提供了導(dǎo)航鉤子全局前置；高階組件 在當(dāng)前應(yīng)用中查找組件， 只能在 render 或 setup 函數(shù)中使用查找組件 在當(dāng)前應(yīng)用中查找指令， 只能在 render 或 setup 函數(shù)中使用將回調(diào)推遲到下一個(gè) DOM 更新周期之后執(zhí)行在更改了一些數(shù)據(jù)以等待 DOM；2epreventDefaultReact中阻止默認(rèn)事件只有此方法3ltLinkltNavLink組件最終都轉(zhuǎn)換為a標(biāo)簽 React不能取別名，Vue可以 React可使用高階組件來解決此類需求；不同點(diǎn)1AngularJS的學(xué)習(xí)成本高，比如增加了DependencyInjection特性，而Vuejs本身提供的API都比較簡(jiǎn)單直觀2在效能上，AngularJS依賴對(duì)資料做臟檢查，所以Watcher越多越慢Vuejs使用基于依賴追蹤的觀察并且使用非同步佇列更新所有的。

為了使Vue組件也可以共享到redux，需要在項(xiàng)目的入口文件引入applyRedux方法整個(gè)項(xiàng)目應(yīng)該只引一次，將redux的store以及redux的context作為參數(shù)傳入或者至少在redux的Provider高階組件引入的地方使用applyRedux方法；react是整體的思路的就是函數(shù)式，所以推崇純組件，數(shù)據(jù)不可變，單向數(shù)據(jù)流，當(dāng)然需要雙向的地方也可以做到，比如結(jié)合reduxform，組件的橫向拆分一般是通過高階組件而vue是數(shù)據(jù)可變的，雙向綁定，聲明式的寫法，vue組件的橫向；將定義的類式組件和函數(shù)式組件引入到App組件 采用包裝模式來實(shí)現(xiàn)狀態(tài)的復(fù)用，通過包裝組件，來增強(qiáng)組件的功能 使用步驟 demo 定義一個(gè)高階組件 在組件內(nèi)使用高階組件 引入高階組件，將需要增強(qiáng)的組件傳入高階組件 在App組件；3帶render prop的常規(guī)組件可以實(shí)現(xiàn)大部分的高階組件Hoc4 注意事項(xiàng)render prop與ReactPureComponent之間的問題如果在render里創(chuàng)建函數(shù)，那么在使用render prop的時(shí)候可能會(huì)抵消ReactPureComponent帶來的收益這是因?yàn)闇\；一些管理端通過不同權(quán)限對(duì)按鈕進(jìn)行控制與隱藏，這個(gè)功能很普遍吧自己記錄一下自己在react端的實(shí)現(xiàn)方式主要使用高階組件方式當(dāng)然咯 這是我們這邊返回的數(shù)據(jù)接口是這樣的每個(gè)按鈕也有唯一的BtnCode 這樣可以做到通用組件，不。

useImperativeHandle和子組件第二位預(yù)留參數(shù)ref的使用需要forwardRef高階組件的配合但有時(shí)候我們不想使用forwardRef高階組件，即子組件預(yù)留的第二位參數(shù)ref失效 這時(shí)候需要手動(dòng)往子組件props參數(shù)中傳遞xxxref，通過xxxref和use；react整體的思路就是函數(shù)式，所以推崇純組件，數(shù)據(jù)不可變，單向數(shù)據(jù)流，當(dāng)然需要雙向的地方也可以做到，比如結(jié)合reduxform，而vue是基于可變數(shù)據(jù)的，支持雙向綁定react組件的擴(kuò)展一般是通過高階組件，而vue組件會(huì)使用mixinvu。

Vue3 中響應(yīng)式核心方法就是 reactive 和 effect ， 其中 reactive 方法是負(fù)責(zé)將數(shù)據(jù)變成響應(yīng)式， effect 方法的作用是根據(jù)數(shù)據(jù)變化去更新視圖或調(diào)用函數(shù)，與 react 中的 useEffect 有點(diǎn)類似~其大概用法如下；混入mixin提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復(fù)用功能一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí)，這些選。