background
I was introduced to the concept of Hook when I was learning React, but Vue 3 hadn’t been released yet. Later, WHEN I learned Vue 3 and saw the combined API, I thought it was the implementation of Hook. Why Hook? How are Vue 3 hooks different from React? Next through this article to share their own understanding.
The concept of the Hook
React the concept of Hook was introduced in React.
React uses a Class to encapsulate a component. A state is designed to manage variables, equivalent to data in Vue 2; Also has lifecycle and custom methods; The template part is written into a render function with JSX. If you need to update the view, you must update the variables in state with the setState method and then update the data on the view. You cannot update the data directly by updating the view.
As you can see, unlike Vue, it is a one-way data flow. Vue is pronounced “view” for view, and “state” means state. If Vue is view-oriented, React is state-oriented.
React implements components using a Class, so the problem is that you have to pay attention to the orientation of this within the Class. In addition, when components are reused or nested, props of each layer of components need to be operated, which is logically complex.
Hence the function component, which implements state separation for React.
Here, the variable declaration, component method and rendering function are all encapsulated into a function. A useEffect is added to realize the life cycle and monitor the change of state data. When calling this component, the function that defines it can be called.
Let’s look at how a component is defined in Vue 3:
Is it very similar to the writing above? But while the writing is similar, they are quite different in implementation. As we mentioned earlier, React is state oriented while Vue is view oriented. When using the React function component, once the data is updated, the function declared by the component is called again to update the view. Vue’s setup method runs only once when the page loads, listening for changes to the view and data. In addition, the React function component incorporates the lifecycle into useEffect, while Vue remains separate.
It is often said that Vue implements React again, but the two concepts are completely different. In fact, it can be understood that Vue adopts React design while retaining its own features.
So what is a Hook? React is defined as keeping state data in function components and incorporating the operations of lifecycle hook functions. With custom hooks, component logic can be extracted into reusable functions. The same functionality can be achieved in Vue 3 using a composite API.
Customize the Hook
When a component is complex, some of the repetitive logic in multiple components can be abstracted. Before Hook, React and Vue both had higher-order component design patterns, using HOC in React and mixin in Vue 2. Why should we abandon them and use Hook? What are the advantages of using custom Hook? Let’s briefly understand HOC and mixin first and then compare them.
HOC uses the decorator pattern by passing components as arguments to a function, adding the new component as a return value after the reuse part. Mixins are like disassembling reusable parts into small pieces that can be splice into as needed.
In practice, mixins have the following disadvantages:
- Implicit dependencies are introduced.
- There can be sequencing and even code conflict coverage issues between different mixins
- Mixin code leads to snowballing complexity
- Multiple mixins cause merge entries to come from unknown sources
To get around these problems, React uses HOC, but it still has its drawbacks:
- The state of a component affects the props of many components
- Creates hell nesting
However, using the new Hook component structure, it can realize the reuse part of the tiled call component, which solves the problem of the unknown source of mixin and the hell nesting of HOC.
Vue 3 implements Hook
React converts a Class component into a function component, implementing a Hook. In Vue 3, hooks are implemented through the most important part of Vue 3’s new features, the composite API.
Components are written using a composite API. In simple terms, data, methods, life cycles, and so on, which were previously separated by data type, are put into a setup function that is called only once when the component is initialized. The specific API is not detailed here, you can go to the official documentation.
Implementing a Hook is easy with a composite API. For example, here is an example of file system management:
Imagine if this code was implemented in Vue 2. It was just an action to create a folder, and the declared variables, methods, listening data, etc. had to be broken up into different parts. Moreover, we had to delete, edit, copy and paste, and so on.
But by writing this Hook form, we can put together code that implements the same function, and not only the code is very clean, but we also have a good idea of where the reusable components are coming from.
Vue 3 also has some low-level optimizations over the React Hook, lifting restrictions on the React function component and improving performance.
conclusion
The general content of this paper is as follows:
thinking
Why there is the concept of hook instead of HOC and mixin? In fact, it is similar to the development from procedural programming language like C language to object-oriented programming language like Java, from the original front-end three swordmen to the use of framework for component development. Hook does the same thing. They encapsulate the related logic together, isolate the irrelevant, and achieve the same function in a more concise way.
You can see that the general direction of progress in program development is to become more abstract, exposing only the interface, shielding the complex implementation of the underlying, you can better understand the flow of data, code logic is clearer, more readable and extensible, and better for collaboration.
State is an important concept in React. Redux is used for state management to make it easier to manage state in React. However, Vue implements a similar Vuex without state mechanism, which makes it a bit of a mess. Similarly, both hooks also use effect. In React, effect is also used to solve the state problem, while Vue uses it in a completely different way.
React seems to realize a state-machine-centered system with close logic between components, while Vue reimplements some methods in React in its own way, making them completely separated and assembling whatever is needed. They are using two completely different ideas, and it is impossible to say which is better, but you can learn from one framework by referring to the design ideas of the other framework.
You yuxi also answered a question on Zhihu some time ago and said that going from AngularJS and React to Vue is actually a conceptual progress. If you just copy these ideas and make a new framework, you are just building the wheel. To make a milestone progress, we should improve the concept.
reference
Blog.csdn.net/qq_35534823…
Zh-hans.reactjs.org/blog/2016/0…
www.jianshu.com/p/a72bf060e…
Blog.csdn.net/qiwoo_weekl…