赤峰做网站的网络公司,网页设计列表,松溪网站建设,莱阳 网站建设一、什么是hooks
直译“钩子”#xff0c;在程序中代表#xff0c;系统运行在某一时期时#xff0c;会调用注册在该时机的回调函数。例如浏览器提供的onload或addEventListener能注册在浏览器各种时机调用的方法。
二、react中的hooks
一系列以“use”作为开发的方法在程序中代表系统运行在某一时期时会调用注册在该时机的回调函数。例如浏览器提供的onload或addEventListener能注册在浏览器各种时机调用的方法。
二、react中的hooks
一系列以“use”作为开发的方法提供在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力
import { useState, useEffect, useCallback } from react;
// 比如以上这几个方法就是最为典型的 Hooks三、vue中的hooks
在vue组合式API里以”use“作为开头的一系列提供了组件复用、状态管理等开发能力的方法。
import { useSlots, useAttrs } from vue;
import { useRouter } from vue-router;
// 以上这些方法也是 vue3 中相关的 Hook四、为什么需要hooks
1、更好的状态复用
1mixins
弊端一难以追溯的方法与属性
export default {mixins: [ a, b, c, d, e, f, g ], // 当然这只是表示它混入了很多能力mounted() {console.log(this.name)// mmp!这个 this.name 来自于谁我难道要一个个混入看实现}
}弊端二覆盖、同名
弊端三梅开二度动态变量难以实现
// 动态生成mixin
function genNameMixin(key, funcKey) {return {data() {return {[key]: genRandomName()}},methods: {[funcKey]: function(v) {this.[key] v} }}
}export default {mixins: [genNameMixin(firstName, setFirstName),genNameMixin(lastName, setLastName),]
}2hook的状态复用写法解决了上述的问题
// 单个name的写法
const { name, setName } useName();// 梅开二度的写法
const { name : firstName, setName : setFirstName } useName();const { name : secondName, setName : setSecondName } useName();2、高度聚合可阅读性提升
3、比class组件更容易理解
在 react 的 class 写法中随处可见各种各样的 .bind(this)。甚至官方文档里也有专门的章节描述了“为什么绑定是必要的”这一问题
vue 玩家别笑computed: { a: () { this } } 里的 this 也是 undefined。
很显然绑定虽然“必要”但并不是“优点”反而是“故障高发”地段。
但在Hooks 写法中你就完全不必担心 this 的问题了。
4、友好的渐进式
无论是 vue 还是 react都只是提供了 Hooks API并将它们的优劣利弊摆在了那里。并没有通过无法接受的 break change 来强迫你必须使用 Hooks 去改写之前的 class 组件。
你依然可以在项目里一边写 class 组件一边写 Hooks 组件。
五、react 的 Hooks 写法
// my-component.js
import { useState, useEffect } from Reactexport default () {// 通过 useState 可以创建一个 状态属性 和一个赋值方法const [ name, setName ] useState()// 通过 useEffect 可以对副作用进行处理useEffect(() {console.log(name)}, [ name ])// 通过 useMemo 能生成一个依赖 name 的变量 messageconst message useMemo(() {return hello, my name is ${name}}, [name])return div{ message }/div
}
六、vue 的 Hooks 写法
templatediv{{ message }}/div
/template
script setup
import { computed, ref } from vue
// 定义了一个 ref 对象
const name ref()
// 定义了一个依赖 name.value 的计算属性
const message computed(() {return hello, my name is ${name.value}
})
/script七、 vue 和 react 自定义 Hook 的异同
相似点 总体思路是一致的 都遵照着 “定义状态数据”“操作状态数据”“隐藏细节” 作为核心思路。差异点 组合式API 和 React函数组件 有着本质差异 vue3 的组件里 setup 是作为一个早于 “created” 的生命周期存在的无论如何在一个组件的渲染过程中只会进入一次。 React函数组件 则完全不同如果没有被 memorized它们可能会被不停地触发不停地进入并执行方法因此需要开销的心智相比于vue其实是更多的。
