React Hooks
useState
useMemo 和usecallback
Hooks show the benefits of specifying dependent variables
. When used, y and changeX will be cached. As long as x does not change, the cached value is always read.
If not used, each time the function component is executed, the actual x , creating new y and
change
Side effects are a concept in functional programming
For a function, if a fixed input will produce a fixed output,
If x is fixed here and the output result is certain, then this is said to be a pure function.
But when we introduce the random number Z, x must be the output that is not fixed.
We can say that this function contains side effects.
useEffect
In the function component, you can use useEffect to define dependent variables with side effects.
Suppose we want to change the title of the current page to the value of x when x changes.
The behavior of changing the title is outside of
the initial side effects, such as requesting data. , operate DOM, these are side effects,
we can all handle them through useEffect
. It can be seen that changes in independent variables lead to changes in dependent variables. Dependent variables can not only act on the view, but also trigger side effects.
useState defines independent variables
useMemo and useCallback to define dependent variables without side effects.
useEffect defines a dependent variable with side effects
useReducer can be regarded as an advanced version of useState, using the concept of redux to merge multiple states into one, which
is essentially a dependent variable.
Example:
The independent variables and dependent variables of one component can be used as the independent variables of another component.
When the level of components increases, the transfer of independent variables becomes very cumbersome.
In order to solve the above problems, we have
useContext
After the first-level component creates the context through createContext,
the fourth-level component
can directly consume the context created by the first-level component through useContext
. In this way, it becomes very simple to pass independent variables across levels.
In this way, cross-level Passing arguments becomes easy,
useRef
Make some personalized requirements. We hope that when the component is updated an odd number of times ,
the li where Even-numbered updates The variable that saves the mark is neither an independent variable nor a dependent variable. It only plays the role of caching data in the path.
This is useRef
to display the li where x is located. If it is an even number of times, it will not be displayed.
It can act on different paths of independent variables and dependent variables to increase the flexibility of component logic.
To summarize,
the essence of React Hooks is independent variables and dependent variables.
useState defines independent variables
useMemo and useCallback define dependent variables without side effects
useEffect defines dependent variables with side effects
useReducer
can be regarded as an advanced version of useState, using the concept of redux to merge multiple states into one, which
is essentially a dependent variable. Convenient operation of more independent variables
useContext is
used to operate independent variables across component levels. useRef is used
to
make the component logic more flexible. useRef is added.