In reactis hooksa very abstract concept, and it is often not very friendly to beginners. Compare the advantages and disadvantages Reactofhooks
advantage
[1]. The code is highly readable. hooksBefore use, publish/subscribe custom events need to be mounted on componentDidMountthe life cycle, and then need to componentWillUnmountbe cleared in the life cycle. After use hooks, pass useEffect, you can put componentDidMountthe life cycle, componentDidUpdatelife cycle, There is also componentWillUnmounta centralized life cycle to facilitate code maintenance
[2]. The level of the component is shallower. Before using it hooks, the method of high-order components is usually used Hocto realize the common state of multiple components and enhance the function of the component. This increases the cost of component rendering and affects performance. However, Hooksin You can use the custom hookscomponent useXXx()method to put the shared state between multiple components into the custom hooks, and you can easily share the state
[3]. No need to think about the pointing problem of classclass components , and there is no need to use it to obtain data and methods in componentsthishooksthis.state
[4]. State logic can be extracted from components, so that these logics can be tested and reused separately, Hookallowing you to reuse state logic without modifying the component structure, which makes sharing between components Hookmore convenient, that is Can greatly reduce redundant code, especially for those scenarios that need to reuse logic
[5]. No destructive changes, Hookwill not affect Reactthe understanding of the concept, provides a more direct , , , , and life cycle Hookfor known concepts, and provides a powerful way to combine themReactAPIpropsstatecontextrefsHook
[6]. Easier to test: Since hooksthey are pure JavaScriptfunctions, they are easy to write unit tests and simulate
shortcoming
[1]. useEffectYou can't write too many things in one. Divide each different function into multiple modules for use, and divide each function block into multiple modules. It follows the single useEffect-responsibility model in software design. Including , and these three life cycles, the life cycle of other class components is not supportedhooksuseEffectconponentDidMountcomponentDidUpdatecomponentWillUnmountclass
[2]. Don't classcall it in the component hook, it is invalid, it can't fully simulate the life cycle of the class component, although it can be used useEffect hookto simulate, but it needs more thinking and planning to use
[3]. HooksIt is a new feature, and there are some compatibility issues. Compared with the class component method, the learning curve is relatively steep, and it takes some time to adapt to this programming mode.
ReactThe main hooksadvantages are to improve the readability and performance of the code, facilitate the maintenance and iteration of the code, and at the same time better achieve state sharing, but it is also necessary to choose the most appropriate method in combination with specific scenarios and requirements during use , nothing more than having hook, there is one more technical solution option
JS Interview Question 17 - Compare server-side rendering with client-side rendering
In what scenario is the event extension in JS interview question 16-Es6 used?
In what scenario is the event extension in JS interview question 16-Es6 used?
Framework - interview question 6 - talk about the hook function of Vue2 and Vue3
One article to understand the operation in the Internet
What you need to know from changing your resume to interviewing
Before joining the job-questions that job seekers must understand in advance
You always copy the code, right? ChatGPT teaches you how to write code
Click on the lower left corner to see more
