hooks香在哪里？

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变化重新刷新）
筛选变化

image

有人可能会说vue怎么不用vue-hooks再加个轮子，这样不公平

我们来看一下尤大大的vue-hooks，都好久没更新了。。。Last Public，去年最新一包。

周下载少的可怜，更别说什么轮子，听都没听说过，搜都搜不到。vue-hooks一点都不成熟

image

	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必然香的鸭皮。