React Hook is a new feature in React 16.8. It lets you use state and other React features without having to write a class.
That means we can do a lot more with functional components (UI components) that we used to encapsulate. With hooks, we can almost kiss class goodbye. React-hooks implement everything the previous classes did and fix some of the problems with the class component, so why not embrace React-hooks?
Some problems with the Class component
Reuse of state logic between components is difficult
Complex components are hard to understand (multiple things that occur when a method appears)
Class component understanding problems (as a vegetable chicken I have written, quietly admit first)
React Hooks fix these issues well. For example, on the first issue, we can use custom Hooks to fix this issue. The second problem is that a single responsibility can be done by writing multiple useeffects. As a chicken, I must hold her tight this time.
React currently has the built-in Hook API
Commonly used Hook
useState
useEffect
useContext
useReducer
useMemo
useCallback
useRef
Other Hook
useImperativeHandle
useLayoutEffect
useDebugValue
useState
Previously, if we needed to use state in function components, we could only use class component writing. But now we can write state in the function component via useState.
UseState takes an argument (the initial value of state) and returns an array (the current state and the function to update state).
UseState = 0; useState = 0; useState = 0; useState = 0; Name can be declared as multiple; Note: useState cannot be used in if... else... Such a conditional statement is called, using the Hook only at the top level; By following this rule, you can ensure that hooks are called in the same order every time you render. This allows React to keep the hook state correct between multiple useState and useEffect calls.Copy the code
useEffect
When you use a class component, you have to send requests to componentDidMount or componentDidUpdate or something like that. You also have to do some cleanup for componentWillUnMount. Previously, functional components had no life cycle at all. UseEffect allows you to perform side effects and clear side effects in function components, which is great! Look at the code
React uses the useEffect function once for the first rendering and every subsequent rendering. Previously we used two life cycle functions to represent the first rendering (componentDidM onut) and the re-rendering caused by the update (componentDidUpdate). UseEffect defines functions that execute asynchronously without preventing the browser from updating the view, whereas the code in componentDidMout and componentDid Update is executed synchronously. 3. UseEffect can be unbound in the form of returning a function. When useEffect does not write the second parameter, in fact,useEffect is unbound every time the state changes. When the second argument is passed an empty array, it is unbound only when the component is destroyed; They are created at render time, but run after the browser draws. See the following content in more detail!Copy the code
useContext
UseContext can share data (under its component tree) and can pass variables across the component hierarchy, solving the problem of passing values to our function components. Note: The argument to useContext must be the context object itself. Take a look at his use below!
Write more random ha, don't blame! Components that call useContext are always rerendered when the context value changes. UseContext just allows you to read the value of the context and subscribe to changes in the context. UseContext is relatively easy to use.Copy the code
useReducer
The useReducer receives two parameters, the first is the reducer function and the second is the initial state. Reducer in Redux is exactly the same, both are pure functions that receive a state and an action and convert it into a new state
One is the example of reducer use on redux official website, and the other is the use of useReducer. There is no change in the two, and partners should be able to understand them at a glance.Copy the code
useMemo
UseMemo is primarily used as a performance optimization tool to solve some of the redundant rendering problems caused by using React Hooks. Because of the lack of a shouldComponentDidUpdate lifecycle function, we can’t do some state change to re-render components, which means that every call is re-rendered, which can cause a big performance cost. UseMemo is designed to solve this redundant rendering problem!
useRef
UseRef is used sparingly, so here are some of the ones I’m familiar with! The useRef returns a mutable ref object whose.current property is initialized as the initialValue passed in. The ref object returned remains constant throughout the life of the component. This is the foundation of everything.
Usage 1: Use useRef to retrieve DOM elements and manipulate DOM directly (borrowing the example from the official documentation)
UseCallback, used in conjunction with the Memo to optimize sub-component rendering times, works with useMemo. UseMemo optimizations are for the current component, while useCallback optimizations are for rendering of child components
I will talk about the three hooks of useativeHandle, useLayoutEffect and useDebugValue next time. I seldom use these three hooks, so I can express them when I am familiar with them enough.
Let’s talk about the rules of Hook
A Hook is essentially a JavaScript function, but there are two rules to follow when using it.
Condition 1: use Hook only at the top level because there is no this in the function component, we cannot confirm which state corresponds to which setState. React relies on the call order of hooks to confirm, so our hooks are executed at the top layer, without affecting one of her execution orders by adding execution judgments such as if. In this way, the internal state can be correctly associated with the corresponding hooks
Condition 2: Only call the Hook in the React function
The last
Writing articles is really very difficult, but I will insist, heart to!
