After using hook for a period of time, it can be said that Hook has greatly improved the development experience and solved the previous pain points.
advantages
- Life cycle as hook, can be used freely in function components, logic aggregation, reuse convenient;
- Custom hook instead of high-order components, more elegant and concise;
- You don’t have to declare a complex class component, you don’t need this, you can simplify some code;
However, the emergence of hook is also controversial. The improvement of hook is not perfect and the community needs to explore a best practice.
Disadvantages:
- It will increase some mental burden, because useEffect is not as intuitive as the previous life cycle, it needs to take into account the influence of dependency, and also need to consider the data storage across the number of renders. If improperly used or not well cached, frequent renders will often occur.
- Because it is too flexible, the code written by the team will be larger if everyone is not familiar with hook.
Class turns into a function
I think React used classes to declare components at the very beginning. On the one hand, it was very intuitive. When you think about a collection of states, methods, and rendering functions, the first thing you would do is to use a class to carry them.
The body of the component is the class, and the rendering function is only a part of it, but not every component needs a complex instance. The real body is the indispensable rendering function of that component, so it is correct to use a rendering function as the body of the component.
Therefore, from the class component to the function component, only need to extract the context of the class, render function as the main body, through the hook to provide life cycle access for the function component.
Why these hooks
Normally we wouldn’t put any side effect code in the Render function because we knew that the render function would be executed repeatedly. UseEffect was introduced to solve this problem, logging the side effect code in a closure and executing it after DOM rendering was complete. Declare dependencies to tell React when to update and execute the closure, a nice alternative to the mount and update life cycles.
So a useEffect actually tells React what state a function needs to depend on and executes the function after rendering.
However, useEffect and useState are not enough. The function components are re-executed on each render, which means we also need the ability to store data in multiple renders. This replaces part of the functionality of the original class this, which is called useRef. As for useMemo and useCallback, both useref-based implementations serve primarily to reduce the number of renders through caching.
UseReducer, on the other hand, is more of a supplement to state management. UseState makes state declarations scattered and granularity control more troublesome. By adding useReducer, states of the same type can be classed together elegantly. Other hooks are just supplementary capabilities, while custom hooks enhance logical layering and abstraction capabilities, making React Hook truly robust.
One thing to note is that since hooks are separated from rendering functions, how does he determine the reference to each hook? The answer is to first mark hook with the convention of use prefix, and then maintain the reference according to the call order. Every time hook is called, the reference stored in the corresponding sequence position can be taken out, which is why hook is not allowed to be wrapped by conditional judgment, which will lead to inconsistent hook call order.
The addition of these apis really gives another way of thinking, now the whole function is only per render, and all the hooks are executed around each render.
React is not well understood, please point out any mistakes, thank you!