https://zhuanlan.zhihu.com/p/103150605?utm_source=wechat_session
從螞蟻金服內(nèi)部分享文章我們可以看出断国，hooks比class寫法簡直太香了，代碼少寫非常多榆苞。學(xué)習(xí)也簡單并思，useData和useEffect解決絕大部分問題。
那么hooks對比vue有沒有更香呢
答案是香一些语稠。因為本來react（class寫法）就得比vue難用難學(xué)代碼寫的多宋彼。所以不可能太香弄砍，但至少更香一些。
接下來會用學(xué)生管理系統(tǒng)來說明hooks香在哪里输涕？
分別通過vue+element-ui和hooks+antd+ahooks來寫學(xué)生管理系統(tǒng)來做個對比音婶。
代碼鏈接：
vue：git@github.com:student-manager-admin/vue-admin.git 代碼行數(shù)：217
react：https://github.com/student-manager-admin/react-admin 代碼行數(shù)：179
業(yè)務(wù)：學(xué)生管理系統(tǒng)
loading（請求前l(fā)oading，得到結(jié)果結(jié)束loading）
分頁（current變化重新刷新）
篩選變化
有人可能會說vue怎么不用vue-hooks再加個輪子莱坎，這樣不公平
我們來看一下尤大大的vue-hooks衣式，都好久沒更新了。檐什。碴卧。Last Public，去年最新一包乃正。
周下載少的可憐住册，更別說什么輪子，聽都沒聽說過瓮具，搜都搜不到荧飞。vue-hooks一點都不成熟
| vue | react | |
|---|---|---|
| 代碼行數(shù) | 多 | 少 |
| 組件傳參 | 方式多 | 方式少 |
| 渲染 | 改變data自己渲染 | 手動setX() |
| 思維 | 雙向綁定 | 單向數(shù)據(jù)流 |
| 邏輯復(fù)用 | 無法復(fù)用 | 可以復(fù)用 |
| 理解 | 容易理解 | 不容易理解 |
一、組件傳參
在這里叹阔。
vue用到了
this.$emit、this.refs[].
react就只用到了props传睹，不管是數(shù)據(jù)還是方法耳幢，都只有一個props
vue組件傳參方式多樣，react雖然也有ref欧啤，但是不推薦使用修档，因為違法了單向數(shù)據(jù)流原則吱窝，數(shù)據(jù)只能從父流到子系宜。
在添加組件和表格組件
vue中數(shù)據(jù)自己管理，react數(shù)據(jù)有父親管理，即Student.jsx這個組件來進行管理口柳。
二嵌削、邏輯復(fù)用
因為react hooks使用邏輯復(fù)用庫，所以代碼行數(shù)稍微少一些啡莉。
this.loading=true
await sleep(500)
this.loading=false
例如loading
vue只能數(shù)據(jù)返回前設(shè)置為true旨剥，返回后設(shè)置為false
currentChange(current){
this.current=current
this.getData()
},
自己設(shè)置current變化
const { search, tableProps,refresh } = useAntdTable(getList, {
form
})
<Table columns={columns} bordered rowKey='id' {...tableProps}/>
react用了useAntdTable 這個方法魄咕，不需要自己loading，不需要自己設(shè)置分頁變化蚌父，不需要自己設(shè)置查詢哮兰，這點代碼通通搞定，香啊苟弛。
目前因為邏輯簡單喝滞，因此看不出多少區(qū)別，但是我相信隨著業(yè)務(wù)的復(fù)雜膏秫，hooks必然香的鴨皮右遭。
