Hooks가 Vue에 어떤 의미인지 이야기해 봅시다.
- WBOY앞으로
- 2022-02-15 17:32:451558검색
이 기사는 Hooks 및 vue에 대한 관련 지식을 제공합니다. Hooks는 V16.7.0-alpha 버전에서 주로 패턴 재사용에 대한 보다 명확한 아이디어를 제공합니다.
Hooks를 Vue의 Lifecycle Hooks와 혼동하지 마세요. Hooks는 V16.7.0-alpha 버전에서 React에 의해 도입되었으며 Vue는 며칠 후에 개념 증명 버전을 출시했습니다. Hooks는 React에 의해 도입되었지만 모든 JavaScript 프레임워크 생태계에 대한 가치 있고 중요한 구성 메커니즘이므로 오늘은 Hooks가 무엇을 의미하는지 논의하는 데 약간의 시간을 할애하겠습니다.
Hooks는 주로 패턴 재사용에 대한 보다 명확한 아이디어를 제공합니다. 즉, 구성 요소 자체를 다시 작성하는 것을 방지하고 상태 저장 논리의 다양한 부분이 원활하게 함께 작동하도록 허용합니다.
원래 질문
React에 관한 한 문제는 다음과 같습니다. 클래스는 상태 개념을 표현할 때 가장 일반적인 구성 요소 형태입니다. 상태 비저장 기능 구성 요소도 매우 인기가 있지만 순수하게만 렌더링할 수 있기 때문에 그 사용은 프레젠테이션 작업으로 제한됩니다.
수업 자체에 문제가 좀 있습니다. 예를 들어 React가 점점 대중화되면서 클래스 문제는 초보자에게 흔한 걸림돌이 되었습니다. React를 이해하려면 개발자는 클래스도 이해해야 합니다. 바인딩을 사용하면 코드가 장황해지고 읽기가 어려워지므로 JavaScript에서 이것을 이해해야 합니다. 클래스 사용으로 인해 발생하는 최적화 장애물 중 일부도 여기에서 설명합니다. this。这里还讨论了使用类所带来的一些优化障碍。
在逻辑复用方面，我们通常使用 render props 和高阶组件等模式。但使用这些模式后会发现自己处于类似的“厄运金字塔”中 —— 样式实现地狱，即过度使用嵌套可能会导致组件难以维护。这导致我想对 Dan Abramov 像喝醉了一样大吼大叫，没有人想要那样。
Hooks 允许我们使用函数调用来定义组件的有状态逻辑，从而解决这些问题。这些函数调用变得更具有组合性、可复用性，并且允许我们在使用函数式组件的同时能够访问和维护状态。React 发布 Hooks 时，人们很兴奋 —— 下面你可以看到 Hooks 展示的一些优势，关于它们如何减少代码和重复：
在维护方面，简单性是关键，Hooks 提供了一种单一的、函数式的方式来实现逻辑共享，并且可能代码量更小。
为什么 Vue 中需要 Hooks？
读到这里你肯定想知道 Hooks 在 Vue 中必须提供什么。这似乎是一个不需要解决的问题。毕竟，类并不是 Vue 主要使用的模式。Vue 提供无状态函数式组件（如果需要它们），但为什么我们需要在函数式组件中携带状态呢？我们有 mixins 用于组合可以在多个组件复用的相同逻辑。问题解决了。
我想到了同样的事情，但在与 Evan You 交谈后，他指出了我忽略的一个主要用例：mixins 不能相互消费和使用状态，但 Hooks 可以。这意味着如果我们需要链式封装逻辑，可以使用 Hooks。
Hooks 实现了 mixins 的功能，但避免了 mixins 带来的两个主要问题：
- 允许相互传递状态。
- 明确指出逻辑来自哪里。
如果使用多个 mixins，我们不清楚哪个属性是由哪个 mixins 提供的。使用 Hooks，函数的返回值会记录消费的值。
那么，这在 Vue 中如何运行呢？我们之前提到过，在使用 Hooks 时，逻辑在函数调用时表达从而可复用。在 Vue 中，这意味着我们可以将数据调用、方法调用或计算属性调用封装到另一个自定义函数中，并使它们可以自由组合。数据、方法和计算属性现在可用于函数式组件了。
例子
让我们来看一个非常简单的 hook，以便我们在继续学习 Hooks 中的组合例子之前理解构建块。
useWat?
好的，Vue Hooks 和 React Hooks 之间存在交叉部分。使用 use 作为前缀是 React 的约定，所以如果你在 React 中查找 Hooks，你会发现 Hooks 的名称都会像 useState、useEffect 等。更多信息可以查看这里。
在 Evan 的在线 demo 里，你可以看到他在何处访问 useState 和 useEffect 并用于 render 函数。
如果你不熟悉 Vue 中的 render 函数，那么看一看官网文档可能会有所帮助。
但是当我们使用 Vue 风格的 Hooks 时，我们会如何命名呢 —— 你猜对了 —— 比如：useData，useComputed
- 상태가 서로 전달되도록 허용합니다.
- 논리의 출처를 명확히 하세요.
useWat?
🎜좋아, Vue Hooks와 React Hooks 사이에는 크로스오버가 있습니다.use를 접두사로 사용하는 것이 React의 관례이므로 React에서 Hooks를 찾아보면 Hooks의 이름이 useState와 같은 것을 알 수 있습니다. code>useEffect 잠깐만요. 자세한 내용은 여기에서 확인할 수 있습니다. 🎜🎜Evan의 온라인 데모에서 그가 렌더링 기능을 위해 useState 및 useEffect에 액세스하는 위치를 볼 수 있습니다. 🎜🎜Vue의 렌더링 기능이 익숙하지 않다면 공식 웹사이트 문서를 살펴보는 것이 도움이 될 수 있습니다. 🎜🎜하지만 Vue 스타일 Hooks를 사용할 때 useData, useCompulated 등과 같이 이름을 어떻게 지정할까요? 🎜🎜그래서 Vue에서 Hooks를 사용하는 방법을 알아보기 위해 샘플 애플리케이션을 만들었습니다. 🎜src/hooks 폴더에 useMounted hook 上阻止了滚动，并在 useDestroyed에서 스크롤을 다시 활성화하는 후크를 만들었습니다. 이렇게 하면 콘텐츠 보기 대화 상자가 열릴 때 페이지 스크롤을 일시 중지하고 보기 대화 상자가 끝나면 다시 스크롤할 수 있습니다. 이는 애플리케이션 전체에서 여러 번 사용될 수 있으므로 좋은 추상화입니다.
import { useDestroyed, useMounted } from "vue-hooks";export function preventscroll() {
const preventDefault = (e) => {
e = e || window.event; if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
// keycodes for left, up, right, down
const keys = { 37: 1, 38: 1, 39: 1, 40: 1 };
const preventDefaultForScrollKeys = (e) => { if (keys[e.keyCode]) {
preventDefault(e); return false;
}
}
useMounted(() => { if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.touchmove = preventDefault; // mobile
window.touchstart = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
});
useDestroyed(() => { if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
//firefox
window.addEventListener('DOMMouseScroll', (e) => {
e.stopPropagation();
}, true);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.touchmove = null;
window.touchstart = null;
document.onkeydown = null;
});
}
그런 다음 AppDetails.vue와 같은 Vue 구성 요소에서 호출할 수 있습니다.
<script>
import { preventscroll } from "./../hooks/preventscroll.js";
...export default {
... hooks() {
preventscroll();
}
}
</script>
해당 구성 요소에서 사용할 수 있을 뿐만 아니라 전체 애플리케이션에서 동일한 기능을 사용할 수 있습니다!
서로를 이해하는 두 개의 Hook
앞서 Hook과 믹스인의 주요 차이점 중 하나는 Hook이 실제로 서로에게 값을 전달할 수 있다는 점을 언급했습니다. 간단하지만 다소 부자연스러운 예를 살펴보겠습니다.
우리 애플리케이션에서는 재사용 가능한 후크에서 계산을 수행해야 하며 해당 계산 결과를 사용해야 합니다. 우리의 경우 창 너비를 가져와서 애니메이션에 전달하는 후크가 있어서 더 큰 화면에 있을 때만 실행된다는 것을 알 수 있습니다.
자세한 내용은 비디오 데모를 참조하세요: css-tricks.com/wp-content/…
첫 번째 후크:
import { useData, useMounted } from 'vue-hooks';export function windowwidth() {
const data = useData({
width: 0
})
useMounted(() => {
data.width = window.innerWidth
})
// this is something we can consume with the other hook return {
data
}
}
그런 다음 두 번째 후크에서는 이를 사용하여 애니메이션 로직을 트리거하는 조건을 생성합니다.
그런 다음 구성 요소 내에서 하나의 후크를 다른 후크에 매개변수로 전달합니다.// the data comes from the other hookexport 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 = 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
}
}
},
...이제 후크를 사용하여 애플리케이션 전체에 로직을 작성할 수 있습니다! 다시 말하지만, 이는 데모 목적으로는 부자연스러운 예이지만, 더 작고 재사용 가능한 함수에서 로직을 유지하여 대규모 애플리케이션에 어떻게 효과적일 수 있는지 확인할 수 있습니다【관련 권장 사항: 《vue.js tutorial》】
위 내용은 Hooks가 Vue에 어떤 의미인지 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!