vue和react的hooks

一、什么是hooks

直译“钩子”,在程序中代表,系统运行在某一时期时,会调用注册在该时机的回调函数。例如浏览器提供的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、更好的状态复用

(1)mixins

弊端一:难以追溯的方法与属性

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'),
  ]
}

(2)hook的状态复用写法,解决了上述的问题

// 单个name的写法
const { name, setName } = useName();

// 梅开二度的写法
const { name : firstName, setName : setFirstName } = useName();

const { name : secondName, setName : setSecondName } = useName();
2、高度聚合,可阅读性提升
3、比class组件更容易理解

reactclass 写法中,随处可见各种各样的 .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 'React'

export default () => {
  // 通过 useState 可以创建一个 状态属性 和一个赋值方法
  const [ name, setName ] = useState('')

  // 通过 useEffect 可以对副作用进行处理
  useEffect(() => {
    console.log(name)
  }, [ name ])

  // 通过 useMemo 能生成一个依赖 name 的变量 message
  const message = useMemo(() => {
    return `hello, my name is ${name}`
  }, [name])

  return <div>{ message }</div>
}

六、vue 的 Hooks 写法

<template>
  <div>
    {{ 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>

七、 vuereact 自定义 Hook 的异同

  • 相似点: 总体思路是一致的 都遵照着 “定义状态数据”,“操作状态数据”,“隐藏细节” 作为核心思路。
  • 差异点: 组合式APIReact函数组件 有着本质差异
    vue3 的组件里, setup 是作为一个早于 “created” 的生命周期存在的,无论如何,在一个组件的渲染过程中只会进入一次。
    React函数组件 则完全不同,如果没有被 memorized,它们可能会被不停地触发,不停地进入并执行方法,因此需要开销的心智相比于vue其实是更多的。

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