和touchmovevue_[译]Hooks对Vue而言意味着什么

• 原文地址&＃xff1a;What Hooks Mean for Vue

• 原文作者&＃xff1a;Sarah Drasner

• 译文出自&＃xff1a;掘金翻译计划

• 本文永久链接&＃xff1a;https://github.com/xitu/gold-miner/blob/master/TODO1/what-hooks-mean-for-vue.md

• 译者&＃xff1a;Ivocin

• 校对者&＃xff1a;LeoYang, TUARAN

不要把 Hooks 和 Vue 的生命周期钩子(Lifecycle Hooks) 弄混了&＃xff0c;Hooks 是 React 在 V16.7.0-alpha 版本中引入的&＃xff0c;而且几天后 Vue 发布了其概念验证版本。虽然 Hooks 是由 React 提出的&＃xff0c;它是一个对各 Javascript 框架生态系统都有价值的、重要的组合机制&＃xff0c;因此我们今天会花一点时间讨论 Hooks 意味着什么。

Hooks 主要是对模式的复用提供了一种更明确的思路 —— 避免重写组件本身&＃xff0c;并允许有状态逻辑的不同部分能无缝地进行协同工作。

最初的问题

就 React 而言&＃xff0c;问题在于&＃xff1a;在表达状态的概念时&＃xff0c;类是最常见的组件形式。无状态函数式组件也非常受欢迎&＃xff0c;但由于它们只能单纯地渲染&＃xff0c;所以它们的用途仅限于展示任务。

类本身存在一些问题。例如&＃xff0c;随着 React 变得越来越流行&＃xff0c;类的问题也普遍成为新手的阻碍。开发者为了理解 React&＃xff0c;也必须理解类。绑定使得代码冗长且可读性差&＃xff0c;并且需要理解 Javascript 中的 this。这里还讨论了使用类所带来的一些优化障碍。

在逻辑复用方面&＃xff0c;我们通常使用 render props 和高阶组件等模式。但使用这些模式后会发现自己处于类似的“厄运金字塔”中 —— 样式实现地狱&＃xff0c;即过度使用嵌套可能会导致组件难以维护。这导致我想对 Dan Abramov 像喝醉了一样大吼大叫&＃xff0c;没有人想要那样。

Hooks 允许我们使用函数调用来定义组件的有状态逻辑&＃xff0c;从而解决这些问题。这些函数调用变得更具有组合性、可复用性&＃xff0c;并且允许我们在使用函数式组件的同时能够访问和维护状态。React 发布 Hooks 时&＃xff0c;人们很兴奋 —— 下面你可以看到 Hooks 展示的一些优势&＃xff0c;关于它们如何减少代码和重复&＃xff1a;

将 &＃64;dan_abramov 的代码(来自 #ReactConf2018)可视化&＃xff0c;你能看到 React Hooks 为我们带来的好处。pic.twitter.com/dKyOQsG0Gd

— Pavel Prichodko (&＃64;prchdk) 2018 年 10 月 29 日

在维护方面&＃xff0c;简单性是关键&＃xff0c;Hooks 提供了一种单一的、函数式的方式来实现逻辑共享&＃xff0c;并且可能代码量更小。

为什么 Vue 中需要 Hooks&＃xff1f;

读到这里你肯定想知道 Hooks 在 Vue 中必须提供什么。这似乎是一个不需要解决的问题。毕竟&＃xff0c;类并不是 Vue 主要使用的模式。Vue 提供无状态函数式组件(如果需要它们)&＃xff0c;但为什么我们需要在函数式组件中携带状态呢&＃xff1f;我们有 mixins 用于组合可以在多个组件复用的相同逻辑。问题解决了。

我想到了同样的事情&＃xff0c;但在与 Evan You 交谈后&＃xff0c;他指出了我忽略的一个主要用例&＃xff1a;mixins 不能相互消费和使用状态&＃xff0c;但 Hooks 可以。这意味着如果我们需要链式封装逻辑&＃xff0c;可以使用 Hooks。

Hooks 实现了 mixins 的功能&＃xff0c;但避免了 mixins 带来的两个主要问题&＃xff1a;

• 允许相互传递状态。

• 明确指出逻辑来自哪里。

如果使用多个 mixins&＃xff0c;我们不清楚哪个属性是由哪个 mixins 提供的。使用 Hooks&＃xff0c;函数的返回值会记录消费的值。

那么&＃xff0c;这在 Vue 中如何运行呢&＃xff1f;我们之前提到过&＃xff0c;在使用 Hooks 时&＃xff0c;逻辑在函数调用时表达从而可复用。在 Vue 中&＃xff0c;这意味着我们可以将数据调用、方法调用或计算属性调用封装到另一个自定义函数中&＃xff0c;并使它们可以自由组合。数据、方法和计算属性现在可用于函数式组件了。

例子

让我们来看一个非常简单的 hook&＃xff0c;以便我们在继续学习 Hooks 中的组合例子之前理解构建块。

useWat?

好的&＃xff0c;Vue Hooks 和 React Hooks 之间存在交叉部分。使用 use 作为前缀是 React 的约定&＃xff0c;所以如果你在 React 中查找 Hooks&＃xff0c;你会发现 Hooks 的名称都会像 useState、 useEffect 等。更多信息可以查看这里。

在 Evan 的在线 demo 里&＃xff0c;你可以看到他在何处访问 useState 和 useEffect 并用于 render 函数。

如果你不熟悉 Vue 中的 render 函数&＃xff0c;那么看一看官网文档可能会有所帮助。

但是当我们使用 Vue 风格的 Hooks 时&＃xff0c;我们会如何命名呢 —— 你猜对了 —— 比如&＃xff1a; useData&＃xff0c; useComputed等。

因此&＃xff0c;为了让我们看看如何在 Vue 中使用 Hooks&＃xff0c;我创建了一个示例应用程序供我们探索。

详见视频演示&＃xff1a;https://css-tricks.com/wp-content/uploads/2019/01/hooks-demo-shorter.mp4

演示网站

GitHub 仓库

在 src/hooks 文件夹中&＃xff0c;我创建了一个 hook&＃xff0c;它在 useMounted hook 上阻止了滚动&＃xff0c;并在 useDestroyed上重新启用滚动。这有助于我在打开查看内容的对话框时暂停页面滚动&＃xff0c;并在查看对话框结束时再次允许滚动。这是一个好的抽象功能&＃xff0c;因为它在整个应用程序中可能会多次使用。

import { useDestroyed, useMounted } from "vue-hooks";

export function preventscroll() {

const preventDefault &＃61; (e) &＃61;> {

e &＃61; e || window.event;

if (e.preventDefault)

e.preventDefault();

e.returnValue &＃61; false;

}

// keycodes for left, up, right, down

const keys &＃61; { 37: 1, 38: 1, 39: 1, 40: 1 };

const preventDefaultForScrollKeys &＃61; (e) &＃61;> {

if (keys[e.keyCode]) {

preventDefault(e);

return false;

}

}

useMounted(() &＃61;> {

if (window.addEventListener) // older FF

window.addEventListener(&＃39;DOMMouseScroll&＃39;, preventDefault, false);

window.onwheel &＃61; preventDefault; // modern standard

window.onmousewheel &＃61; document.onmousewheel &＃61; preventDefault; // older browsers, IE

window.touchmove &＃61; preventDefault; // mobile

window.touchstart &＃61; preventDefault; // mobile

document.onkeydown &＃61; preventDefaultForScrollKeys;

});

useDestroyed(() &＃61;> {

if (window.removeEventListener)

window.removeEventListener(&＃39;DOMMouseScroll&＃39;, preventDefault, false);

//firefox

window.addEventListener(&＃39;DOMMouseScroll&＃39;, (e) &＃61;> {

e.stopPropagation();

}, true);

window.onmousewheel &＃61; document.onmousewheel &＃61; null;

window.onwheel &＃61; null;

window.touchmove &＃61; null;

window.touchstart &＃61; null;

document.onkeydown &＃61; null;

});

}

然后我们可以在像 AppDetails.vue 一样的 Vue 组件中调用它&＃xff1a;

import { preventscroll } from "./../hooks/preventscroll.js";

...

export default {

...

hooks() {

preventscroll();

}

}

我们不仅可以在该组件中使用它&＃xff0c;还可以在整个应用程序中使用相同的功能&＃xff01;

能够相互理解的两个 Hooks

我们之前提到过&＃xff0c;Hooks 和 mixins 之间的主要区别之一是 Hooks 实际上可以互相传值。让我们看一下这个简单但有点不自然的例子。

在我们的应用程序中&＃xff0c;我们需要在一个可复用的 hook 中进行计算&＃xff0c;还有一些需要使用该计算结果的东西。在我们的例子中&＃xff0c;我们有一个 hook&＃xff0c;它获取窗口宽度并将其传递给动画&＃xff0c;让它知道只有当我们在更大的屏幕上时才会触发。

详见视频演示&＃xff1a;https://css-tricks.com/wp-content/uploads/2019/01/hook-logo.mp4

第一个 hook:

import { useData, useMounted } from &＃39;vue-hooks&＃39;;

export function windowwidth() {

const data &＃61; useData({

width: 0

})

useMounted(() &＃61;> {

data.width &＃61; window.innerWidth

})

// this is something we can consume with the other hook

return {

data

}

}

然后&＃xff0c;在第二个 hook 中&＃xff0c;我们使用它来创建一个触发动画逻辑的条件&＃xff1a;

// the data comes from the other hook

export function logolettering(data) {

useMounted(function () {

// this is the width that we stored in data from the previous hook

if (data.data.width > 1200) {

// we can use refs if they are called in the useMounted hook

const logoname &＃61; this.$refs.logoname;

Splitting({ target: logoname, by: "chars" });

TweenMax.staggerFromTo(".char", 5,

{

opacity: 0,

transformOrigin: "50% 50% -30px",

cycle: {

color: ["red", "purple", "teal"],

rotationY(i) {

return i * 50

}

}

},

...

然后&＃xff0c;在组件内部&＃xff0c;我们将一个 hook 作为参数传递给另一个 hook&＃xff1a;

import { logolettering } from "./../hooks/logolettering.js";

import { windowwidth } from "./../hooks/windowwidth.js";

export default {

hooks() {

logolettering(windowwidth());

}

};

现在我们可以在整个应用程序中使用 Hooks 来编写逻辑&＃xff01;再提一下&＃xff0c;这是一个用于演示目的不太自然的例子&＃xff0c;但你可以看到这对于大型应用程序&＃xff0c;将逻辑保存在较小的、可复用的函数中是有效的。

未来的计划

Vue Hooks 现在已经可以与 Vue 2.x 一起使用了&＃xff0c;但仍然是实验性的。我们计划将 Hooks 集成到 Vue 3 中&＃xff0c;但在我们自己的实现中可能会偏离 React 的 API。我们发现 React Hooks 非常鼓舞人心&＃xff0c;正在考虑如何向 Vue 开发人员介绍其优势。我们想以一种符合 Vue 习惯用法的方式来做&＃xff0c;所以还有很多实验要做。

你可以查看这个仓库作为起步。Hooks 可能会成为 mixins 的替代品&＃xff0c;所以虽然这个功能还处于早期阶段&＃xff0c;但是一个在此期间探索其概念是有好处的。

(真诚地感谢 Evan You 和 Dan Abramov 为本文审阅。)

如果发现译文存在错误或其他需要改进的地方&＃xff0c;欢迎到 掘金翻译计划 对译文进行修改并 PR&＃xff0c;也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区&＃xff0c;文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域&＃xff0c;想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。