About the React-hooks component and its properties

Rounding useState

UseState is a react hook function that declares state variables.

The useState function takes the initial value of the state and returns an array in which bit 0 is the current state value and bit 1 is the method function that can change the state value

1. UseEffect

UseEffect can be used to replace the componentDidMount and componentDidUpdate lifecycle functions

Instead of executing componentWillUnmount when the component is about to be unloaded, this function returns a function form

Example:

UseEffect (() = > {the console. The log (', '); Return ()=>{console. log(' Dude, you're gone ')}},[])Copy the code

// The second argument in useEffect is passed to the empty array to indicate that the unbinding is only done when the component is destroyed

My understanding is that the second argument here is to implement the unbinding condition

---

2. Use of useContext

UseContext is primarily used for communication between parent and child components

 

3. Use of useReducer

UseContext can cooperate with useReducer to complete similar operations of the Redux library. UseReducer can make the code more readable and maintainable. It is similar to reducer and Reducer functions in Redux, which receive two parameters, one is state, and the other is state. A judgment parameter used to control business logic

 

4. UseReducer useContext implements redux state management and state sharing

Achieve global status and unified management, unified event distribution

 

1. Use useDemo

Function components have shouldCompnentUpdate, there is no way to determine whether a component is updated by a condition before it.

There is no longer a distinction between mount and update states in function components, which means that every call to a function component executes all the internal logic, resulting in a significant performance penalty. Both useMemo and useCallback address these performance issues

2. Use of useRef

Get the React JSX DOM element with useRef. Once you get it, you can control anything in the DOM. However, this is not recommended. The React interface changes can be controlled by state.

Using useRef to save variables, which is also rarely used in the workplace, doesn’t really make sense when we have useContext