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:[email protected]: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
  })

react用了useAntdTable 这个方法,不需要自己loading,不需要自己设置分页变化,不需要自己设置查询,这点代码通通搞定,香啊。
目前因为逻辑简单,因此看不出多少区别,但是我相信随着业务的复杂,hooks必然香的鸭皮。

你可能感兴趣的:(hooks香在哪里?)