Shulou(Shulou.com)06/01 Report--

This article will explain in detail what are the relevant knowledge points about Hooks and vue, the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Hooks is introduced by React in the V16.7.0-alpha version, and Hooks mainly provides a clearer idea for pattern reuse.

Don't confuse Hooks with Vue's lifecycle Lifecycle Hooks, Hooks was introduced by React in the V16.7.0-alpha version, and Vue released its proof-of-concept version a few days later. Although Hooks was proposed by React, it is a valuable and important combinatorial mechanism for all JavaScript framework ecosystems, so we will take a moment today to discuss what Hooks means.

Hooks mainly provides a clearer idea for pattern reuse-avoiding rewriting the component itself and allowing different parts of stateful logic to work together seamlessly.

The initial question.

As far as React is concerned, the problem is that classes are the most common form of components when expressing the concept of state. Stateless functional components are also very popular, but because they can only render simply, their use is limited to presentation tasks.

There are some problems with the class itself. For example, as React becomes more and more popular, class problems generally become a hindrance for beginners. In order to understand React, developers must also understand classes. Bindings make the code verbose and less readable, and you need to understand the this in JavaScript. Some optimization obstacles caused by the use of classes are also discussed here.

In terms of logical reuse, we usually use patterns such as render props and high-level components. But after using these patterns, you will find yourself in a similar "pyramid of doom"-style implementation hell, that is, excessive use of nesting can make components difficult to maintain. It made me want to yell at Dan Abramov like I was drunk, and no one wanted that.

Hooks allows us to solve these problems by using function calls to define the stateful logic of a component. These function calls become more combinative, reusable, and allow us to access and maintain state while using functional components. When React released Hooks, people were excited-- here you can see some of the advantages that Hooks shows about how they reduce code and repetition:

In terms of maintenance, simplicity is the key, and Hooks provides a single, functional way to achieve logical sharing, possibly with less code.

Why is Hooks needed in Vue?

At this point, you must want to know what Hooks must provide in Vue. This seems to be a problem that does not need to be solved. After all, classes are not the main pattern used by Vue. Vue provides stateless functional components (if needed), but why do we need to carry state in functional components? We have mixins to combine the same logic that can be reused in multiple components. Our problem's solved.

I thought of the same thing, but after talking to Evan You, he pointed out a major use case that I overlooked: mixins can't consume and use states with each other, but Hooks can. This means that if we need chained encapsulation logic, we can use Hooks.

Hooks implements the functionality of mixins, but avoids two major problems caused by mixins:

Allow status to be passed on to each other.

Clearly point out where the logic comes from.

If you use multiple mixins, it is not clear which attribute is provided by which mixins. With Hooks, the return value of the function records the consumed value.

So how does this work in Vue? As we mentioned earlier, when using Hooks, logic is expressed at the time of a function call and can be reused. In Vue, this means that we can encapsulate data calls, method calls, or evaluation property calls into another custom function and make them free to combine. Data, methods, and calculation properties are now available for functional components.

Examples

Let's look at a very simple hook so that we can understand the building blocks before moving on to the composition examples in Hooks.

UseWat?

OK, there is a cross between Vue Hooks and React Hooks. Using use as a prefix is the convention of React, so if you look up Hooks in React, you will find that the names of Hooks will be like useState, useEffect, etc. More information can be found here.

In Evan's online demo, you can see where he accesses useState and useEffect and uses them for render functions.

If you are not familiar with the render function in Vue, it may be helpful to take a look at the official website documentation.

But when we use Vue-style Hooks, how do we name it-- you guessed it-- for example: useData,useComputed, etc.

So, to show us how to use Hooks in Vue, I created a sample application for us to explore.

In the src/hooks folder, I created a hook that blocked scrolling on useMounted hook and re-enabled scrolling on useDestroyed. This helps me pause page scrolling when I open the view dialog box and allow scrolling again at the end of the view dialog box. This is a good abstract feature because it may be used multiple times throughout the application.

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;});}

We can then call it in a Vue component like AppDetails.vue:

Import {preventscroll} from ". /.. / hooks/preventscroll.js";. Export default {. Hooks () {preventscroll ();}}

Not only can we use it in this component, but we can also use the same functionality throughout the application!

Two Hooks that can understand each other

As we mentioned earlier, one of the main differences between Hooks and mixins is that Hooks can actually pass values to each other. Let's take a look at this simple but somewhat unnatural example.

In our application, we need to do the calculation in a reusable hook, and there are some things that need to use the result of the calculation. In our example, we have a hook that takes the window width and passes it to the animation to let it know that it will only trigger when we are on a larger screen.

For more information, please see Video presentation: css-tricks.com/wp-content/ …

First hook:

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}}

Then, in the second hook, we use it to create a condition that triggers the animation logic:

/ / 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%-30px", cycle: {color: ["red", "purple", "teal"], rotationY (I) {return I * 50},.

Then, inside the component, we pass one hook as a parameter to another hook:

Import {logolettering} from ". /.. / hooks/logolettering.js"; import {windowwidth} from ". /.. / hooks/windowwidth.js"; export default {hooks () {logolettering (windowwidth ());}}

Now we can use Hooks to write logic throughout the application! Again, this is an unnatural example for demonstration purposes, but you can see that it works for large applications to store logic in smaller, reusable functions.

This is the end of this article on "what are the relevant knowledge points of Hooks and vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.