https://zhuanlan.zhihu.com/p/103150605?utm_source=wechat_session
从蚂蚁金服内部分享文章我们可以看出，hooks比class写法简直太香了，代码少写非常多。学习也简单，useData和useEffect解决绝大部分问题。
那么hooks对比vue有没有更香呢
答案是香一些。因为本来react（class写法）就得比vue难用难学代码写的多。所以不可能太香，但至少更香一些。
接下来会用学生管理系统来说明hooks香在哪里？
分别通过vue+element-ui和hooks+antd+ahooks来写学生管理系统来做个对比。
代码链接：
vue：git@github.com:student-manager-admin/vue-admin.git 代码行数：217
react：https://github.com/student-manager-admin/react-admin 代码行数：179
业务：学生管理系统
loading（请求前loading，得到结果结束loading）
分页（current变化重新刷新）
筛选变化
有人可能会说vue怎么不用vue-hooks再加个轮子，这样不公平
我们来看一下尤大大的vue-hooks，都好久没更新了。。。Last Public，去年最新一包。
周下载少的可怜，更别说什么轮子，听都没听说过，搜都搜不到。vue-hooks一点都不成熟
| vue | react | |
|---|---|---|
| 代码行数 | 多 | 少 |
| 组件传参 | 方式多 | 方式少 |
| 渲染 | 改变data自己渲染 | 手动setX() |
| 思维 | 双向绑定 | 单向数据流 |
| 逻辑复用 | 无法复用 | 可以复用 |
| 理解 | 容易理解 | 不容易理解 |
一、组件传参
在这里。
vue用到了
this.$emit、this.refs[].
react就只用到了props，不管是数据还是方法，都只有一个props
vue组件传参方式多样，react虽然也有ref，但是不推荐使用，因为违法了单向数据流原则，数据只能从父流到子。
在添加组件和表格组件
vue中数据自己管理，react数据有父亲管理，即Student.jsx这个组件来进行管理。
二、逻辑复用
因为react hooks使用逻辑复用库，所以代码行数稍微少一些。
this.loading=true
await sleep(500)
this.loading=false
例如loading
vue只能数据返回前设置为true，返回后设置为false
currentChange(current){
this.current=current
this.getData()
},
自己设置current变化
const { search, tableProps,refresh } = useAntdTable(getList, {
form
})
<Table columns={columns} bordered rowKey='id' {...tableProps}/>
react用了useAntdTable 这个方法，不需要自己loading，不需要自己设置分页变化，不需要自己设置查询，这点代码通通搞定，香啊。
目前因为逻辑简单，因此看不出多少区别，但是我相信随着业务的复杂，hooks必然香的鸭皮。
