React Hooks

Introduce the React Hooks

What are React Hooks for

Enhance functional components so that they can store state and have the ability to handle side effects. Let developers implement the same functionality without using class components

Side effects are side effects in a component that are not code that transforms data into a view, such as getting dom elements, adding event responses to DOM elements, setting timers, and sending Ajax requests. In the class component we use lifecycle functions to handle these side effects, and in the function component we need Hooks to handle side effects.

Class component deficiencies (issues to be addressed by Hooks)

1. Lack of logical reuse mechanism

  • In order to reuse logic to add components without actual rendering effect, added component hierarchy display is very bloated
  • It increases the difficulty of debugging and reduces the operation efficiency

Class components often become too complex to maintain

  • Split a coherent set of business logic into multiple lifecycle functions
  • There are multiple disparate business logic within a lifecycle function

Class member methods do not guarantee the correctness of this

The React Hooks used

React Hooks are a set of hook functions that enhance functional components. React Hooks provide different functions. They all have a feature that starts with use and uses function closures to store data.

  • useState()
  • useEffects()
  • useReducer()
  • useRef()
  • useCallback()
  • useContext()
  • useMemo()

UseState () is used to introduce state to function components

UseState details

  1. Accepts a unique parameter, the initial value of the state. The initial value can be any data type.
  2. The return value is an array. The array stores the state value and the method that changes the state value. The method name convention begins with set followed by the state name.
  3. Method can be called multiple times to hold different state values.
  4. The argument can be a function, the initial state is whatever the function returns, and the function will only be called once, if the initial value is a dynamic value.

Sets the usage details of the state method

The parameter to the method can be either a value or a function: (state) => {return newState} state is the current state, newState is the newState

The method that sets the status-value method is itself asynchronous

2. UseReducer () is another way to keep the state of function components

3 useContext() simplifies code for retrieving data when retrieving data across component hierarchies

UseEffect hook function execution analysis

Give functional components the ability to handle side effects. Similar to life cycle functions.

UseEffect Execution time

UseEffect can be viewed as a combination of componentDidMount, componentDidUpdate, and componentWillUnmount.

  • useEffect(() => {}) => componentDidMount, componentDidUpdate

  • useEffect(() => {}, []) => componentDidMount

  • useEffect(() => () => {}) => componentWillUnMount

UseEffect resolves the problem

  • Categorize code by purpose (grouping a coherent set of business logic into the same side effect function)
  • Simplify repetitive code and make the internal code of components clearer

5, useMemo ()

UseMemo behaves like calculated properties in Vue and can monitor changes in a value and calculate new values based on the changes.

UseMemo caches the results. If the monitoring value does not change, it will not be recalculated even if the component is re-rendered. This behavior can help avoid expensive calculations on each render.

Memo method

Role: Performance optimization, prevents component updates if the data in the component has not changed. Similar to PureComponent and shouldComponentUpdate in class components

6, useCallback ()

Performance optimization, caching functions so that components get the same function instance when re-rendering.

7, useRef ()

  • Gets the DOM element object

  • Save data (across component cycles)

Even if the component is re-rendered, the saved data remains. Changes to saved data do not trigger component re-rendering.

Custom hooks functions

  • Custom hooks are a standard way to encapsulate and share logic.

  • A custom Hook is a function whose name begins with use.

  • Custom hooks are a combination of logic and built-in hooks.

UseReducer. Achieve