In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
This article introduces the relevant knowledge of "how to master Hooks". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
Think back to the process of getting started with Hooks, have you experienced:
Analogy to the life cycle of ClassComponent, learning the timing of Hooks execution
After getting proficient, I found that the timing and life cycle of Hooks are a little different. For example, which Hooks does componentWillReceiveProps correspond to?
Feel confused, search for some articles on the principle of Hooks to read.
As an API, shouldn't you simply call Coco Love according to the document? why is Hooks so difficult?
React officials have also discovered this problem, and when it comes to rewriting documents in React, React rewrites documents based on Hooks.
This paper mainly includes two aspects:
Explain why Hooks is difficult to learn
Give some suggestions on learning Hooks.
The underlying architecture of React
You can summarize React in one formula:
Const UI = fn (state)
The view can be thought of as a mapping of states through functions.
The interaction between the user and the interface can be seen as the continuous implementation of this formula.
This formula is too concise to explain where the state (state) comes from. Let's extend it:
Const state = reconcile (update); const UI = fn (state)
Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community
User interaction generates update (update)
Update calculates the state of the current application through the reconcile step
Fn maps state to view changes (UI)
Let's give fn a name: commit:
Const state = reconcile (update); const UI = commit (state)
So where does update come into being? Of course, it comes from user interaction, such as click events.
So the underlying architecture of React can be reduced to three steps:
User interaction generates update
State = reconcile (update)
UI = commit (state)
Now that we understand the underlying architecture, let's take a look at the problems associated with learning Hooks through analogy ClassComponent.
Abstract level of lifecycle function
We already have a complete underlying architecture that drives view updates. How should developers operate this architecture?
You can use the computer's level of abstraction as an analogy:
High-level: application middle layer: operating system bottom layer: computer composition architecture
Corresponding React:
High-level: application ClassComponent life cycle middle layer: operating system intervention architecture API bottom layer: computer composition architecture React underlying architecture
As you can see, life cycle functions belong to a high level of abstraction. It is also designed to make it easier for developers to use React.
Imagine that a Vue2 developer who wants to switch to the React technology stack only needs to learn the life cycle of React by analogy to the life cycle of Vue.
All this was all right before the arrival of Hooks, however.
Level of abstraction of Hooks
Hooks belongs to a medium level of abstraction. In other words, Hooks is directly involved in the running process of the underlying architecture.
High-level: application middle layer: operating system Hooks bottom layer: computer composition architecture React underlying architecture
When we use life cycle functions to compare Hooks, we actually use things with high levels of abstraction to describe things with low levels of abstraction.
Animals-- > mammals-- > cattle-- > cows
How do you explain to a person who has only seen a cow and never seen another animal what a mammal is?
It is precisely because of the asymmetry of the abstract level that we will encounter problems in learning Hooks through life cycle function analogy.
How to learn Hooks
Since Hooks belongs to the middle level of abstraction and is close to the bottom, a better way to learn is to learn upward through the bottom.
Come up with our three-step formula:
User interaction generates update
State = reconcile (update)
UI = commit (state)
Against the formula, let's explain several common hook workflows:
UseState
For example:
Function App () {const [state, updateState] = useState (0); return updateState (state + 1)} >;}
The array of values returned by useState contains:
Saved state
Change the method of state updateState
Compared with the formula, state is calculated in step 2 of the formula:
State = reconcile (update)
The view has not been updated at this time.
The user clicks div to trigger updateState, corresponding to step 1 of the formula:
User interaction generates update
So calling updateState opens the three-step running process of the underlying architecture.
When reconcile calculates the state, it moves on to step 3:
UI = commit (state)
Finally render the view.
UseEffect
For example:
UseEffect (doSomething, [xx, yy])
The callback function doSomething of useEffect is called asynchronously after the third step is completed:
UI = commit (state)
So you can get the view to complete the update inside the doSomething function.
The second parameter, [xx, yy], as a dependency, determines whether doSomething will be called.
UseLayout
Unlike useEffect, which is called asynchronously after the third step of execution, Effect is executed synchronously after the third step of the UI operation.
UseRef
As you can see in the above example, useState and useEffect are triggered at different steps of the three-step process, and their trigger timing is determined.
So how do these three steps communicate? Through useRef.
UseState acts on the first and second steps, useLayoutEffect on the third step, and useEffect on the completion of the third step.
With useRef, you can share reference type data between different steps.
As you can see, React provides a corresponding hook for each step of the underlying architecture's three-step workflow, as well as a hook that concatenates the three-step workflow.
Developers only need to assemble the custom hook through the basic Hooks according to the business needs, and can run the logic at all stages of the process running in the underlying architecture.
Is learning from the bottom up putting the cart before the horse?
Some students will retort: before to learn React to learn the timing of the life cycle function, now to learn Hooks to learn the underlying architecture to run the process. Isn't it putting the cart before the horse and making it more complicated?
Actually this is not so. Let me ask you a few questions:
Why is componentWillReceiveProps marked as unsafe?
Have you ever used getDerivedStateFromProps?
Is this.setState synchronous or asynchronous?
These problems related to lifecycle functions are not simple at all! Many of the front ends of React that have been used for several years may not necessarily be answered.
As a high-level abstraction, lifecycle functions hide too many implementation details. At the same time, React is too flexible, unlike Vue, which restricts developers' operations through the template language.
The result: different React developers write all kinds of weird ClassComponent.
Instead, run the process through the underlying architecture to learn Hooks:
The underlying architecture running process is the absolute truth of React, and no more abstractions are hidden.
The writing specification of Hooks limits the strange operations of developers.
The only problem here is the lack of a document that starts from the bottom. This is also the original intention of officials to rewrite the document.
This is the end of "how to master Hooks". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
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.
Views: 286
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.