We pump development on Vue using patterns: HOC
The HOC (Higher Order Component) pattern is very popular with React developers. But Vue-developers somehow bypass it. Very vain. Let's try to figure it out.
What is a HOC?
A higher-order component (HOC) is a function that takes an existing component and returns another component that wraps the original one, adding new logic.
HOC vs mixins
Perhaps many will wonder why use HOC when there are impurities? They also add new functionality to components. What can HOC which impurities do not know?
First, recall what impurities are in Vue (definition taken from Vue's documentation):
Mixins are a flexible code reuse tool in Vue components. The impurity object may contain any component options. When an impurity is used by a component, all impurity options are “mixed” with the component's own options.
It seems that the purpose of impurities and HOC is the same - they allow you to expand the functionality of different components. And outside (using the final component) it can even look the same.
But the difference lies in the very principle of HOC and impurities. Impurities are “mixed in” when declaring a component — any component instance will contain them.
Using HOC, we wrap an instance of a component not changing the component itself, but creating a new one where it is needed. This means that we only affect the piece of code where we use it. Due to this, we reduce the coherence of the code, make it more readable and flexible.
HOC is a bit like a decorator design pattern .
HOC creation
Well. Let's take a look at all this with an example.
So, we have a button component:
After some time, we suddenly needed to log the pressing of some buttons (but not all). We can do this through impurities by mixing the code for logging into the button component, and then, in the right place, enable or disable logging through some component property. But agree, this is not very convenient? And if there is a lot of such functionality? One mistake - and all buttons may stop working correctly.
HOC in this case would be a great solution. We just wrap the button in some places with the corresponding HOC.
It's time to get to know the HOC in practice.
Step 1. Create a HOC Function
We remember that HOC is a function that takes a component as input and returns another. So let's create such a function. Let's call it withLoggerButton.
It is customary to start naming HOC functions with - this is a kind of identification mark of HOCs.
The result is a function that takes a Button component as an input, and then returns a new component. In the render function, we use the original component, but with one change - we add an event to click on the DOM node, the output of the inscription clicked in the console.
If you do not understand what is happening here, what h and context are, then first read the vue documentation on how render functions work.
In the current example, I used the functional component, because I do not need a condition. Nobody forbids you to return a regular component instead of a functional one, but do not forget that functional components are much faster than ordinary ones.
Step 2. Using HOC
Now, using the resulting function, we simply create a new component.
The only thing left is to connect the received component where we need click logging.
Final example:
Composition
All this is certainly great, but what if you need a button that not only logs in, but also performs some other action?
Everything is simple. We are turning one HOC into another. We can mix as many HOCs as we like.
Also for composition there are a lot of ready-made functions and libraries that facilitate composition.
HOC is a simple but very powerful pattern. It is used at the base of many libraries. It is not a silver bullet or a complete replacement for mixins and the mechanism of component inheritance. Use it wisely in combination with other patterns and your Vue applications will become truly flexible.