React Hooks 与 Vue composition API

什么是 hooks 及 hooks 的作用

hooks 是在函数组件中 "钩入" react state 和生命周期等特性的函数。使用 hooks 利于业务逻辑的重用,减小了代码体积。

逻辑复用其他的解决方案存在不足:vue 中使用 minix 混入(在引入文件中进行方法和属性的合并,相同的属性名会覆盖,相同函数名会合并为一个数组,即存在命名冲突问题)

react 中使用高阶组件,本质是接收一个组件作为参数,返回一个组件的函数。优点是逻辑复用,不影响被包裹组件的内部逻辑,缺点是如果高阶组件传给被包裹组件的 props 重名会导致覆盖

vue3 composition API,增加了新的组件选项 setup,setup() 为组件提供了状态、计算值、watcher 和生命周期钩子

react hooks 与 vue composition api 的差别

1. 原理上:react hooks 底层是基于链表实现的,当组件渲染时会顺序地执行所有的 hooks ,每个 hook 的 next 指向下一个 hook。vue hook 只会调用一次,原因在于它对数据的响应是基于 proxy 的,对数据直接代理观察,只要任何地方改动了 data,相关的 function/template 都会被重新计算。

2. 代码执行:react hooks 是在每次组件渲染时运行,vue setup 只会在组件创建时运行一次;vue composition API 的 setup 晚于 beforecreate 早于 create 被调用

3. 声明状态:react hooks 使用 useState hooks 来初始化状态,vue 声明状态主要是 ref 和 reactive,其中 ref 返回一个响应式对象,通过 value 属性访问到,可用于基本类型/对象。reactive 只将对象作为输入,并返回响应式代理(使用了对象解构会失去响应性)

4. 如何跟踪依赖:react hooks 的 useEffect 每次重新渲染后都会执行,可以通过定义依赖的属性/方法来跳过某些 hook 的执行;vue 通过 watch 执行副作用响应状态/属性的改变

5. 访问组件生命周期:react hooks 从思考习惯改变,考虑副作用依赖什么状态;vue 通过  onMounted、onUpdated 和 onBeforeUnmount 函数

6. Refs: React 的 useRef 和 Vue 的 ref 都允许你引用一个子组件 或 要附加到的 DOM 元素

7. Context 和 provide/inject: vue Composition API 中增加了一对用在 setup() 中的 provide 和 inject 函数

你可能感兴趣的:(vue.js,react)