vue3 react对比理解hook

随着版本的升级 vue 和 react 越来越像了。

• 2019年年初，react 在 16.8.x 版本正式具备了 hooks 能力。
  2019年6月，尤雨溪提出了关于 vue3 Component API 的提案。笔者理解这其实是 vue 版本的 hooks。

• Vue 和 React 相继都推出了Hooks，那么今天我们就通过对比的方式来学习 Vue 和 React 的 Hook。

为什么需要 Hooks

hook可以使在组件之间复用状态逻辑更简单

在vue中我们使用mixins或extends来复用逻辑，在react中可以使用render props 或者 HOC来复用逻辑。但是它们都会有弊端。

• 比如vue中的mixins，当我们一个组件引入很多mixin的时候，多个mixin的同名、合并等问题随之而来，而且也不利于我们代码理解和问题排查。

• 比如react中的render props 或者 HOC，传递渲染属性和高阶组件的层层嵌套包裹，也不利于代码的理解和维护。

这个时候Hook就能很好的解决了

Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。

使用规则

react

• 只能在函数式组件或自定义Hook中调用。
• 只在最顶层使用 Hook，不要在循环，条件或嵌套函数中调用 Hook。

vue

• 只能在setup函数里面使用。

自定义 Hook函数偏向于功能，而组件偏向于界面和业务逻辑