526互联

vue或者react中的hooks的理解

发布时间 2023-03-31 13:51:38作者: 茶记忆

我们听过react 里面有hooks的概念，那么怎么理解hooks呢？

 

其实vue2中，我们没有hooks的概念，vue3中我们引入了组合式函数（也就是用组合式api写的），它其实就是vue的hooks。

 

总结下来，hooks有以下特点：

1、hooks其实就是个函数，只是实现它的方法比较特殊，利用组合式api实现的。

2、组合式函数是有状态逻辑的函数，返回的内容，可能随着时间的变化而变化。（和lodash不一样，传入什么，立马返回一个固定的）

3、hooks其实就是把vue2中的mixins 用一个函数返回，这样使用起来很优雅。

4、hooks函数，约定成俗用useXxxx开头命名。

 

例子：比如我们要实现一个倒计时的功能，因为变量状态会一直变，用hook是的方式实现，最好不过了。你可以类别vue2中实现该功能如何实现。

export const useCountdown = (count = 60) => {
  const countRef = ref(0);

  let timer;

  const stopTask = () => {
    countRef.value = 0;
    timer && clearInterval(timer);
  };

  const startTask = () => {
    stopTask();
    countRef.value = count;
    timer = setInterval(() => {
      const nextValue = countRef.value - 1;
      countRef.value = nextValue;
      if (nextValue === 0) {
        stopTask();
      }
    }, 1000);
  };

  return [countRef, startTask, stopTask];
};