Which are fixed by hooks?

Class components had these issues before hooks came along, which are what hooks are for:

  1. It is difficult to reuse state logic between components, and the reuse effect is generally achieved through higher-order components, which is prone to nesting hell and other shortcomings.

  2. Complex components become difficult to understand, for example, a class component needs to deal with a lot of logic, and the processing of these logic depends on a certain life cycle of the component, which means that many things need to be handled in a certain life cycle of the component, leading to component life cycle overpopulation.

  3. Difficult to understand class, class components must be aware of the problem this points to;

  4. It lets you use state and other React features without having to write a class.

Which hooks are there?

Here are the hooks that come with React. The other hooks are custom hooks.

  • useState

    • Define the state of the function component itself;

  • useEffect

    • Component side effects that can implement the class component componentDidMount | componentDidUpdate | componentWillUnmount, execution order: Component update mount complete -> Browser DOM drawing complete -> Execute useEffect callback

  • UseLayoutEffect – Component update mount complete -> Execute useLayoutEffect callback -> Browser DOM drawing complete

  • useContext

    • Get the value of the most recent parent component Provider without having to fetch the value of < context.consumer >{(value)=>{value.count}}
      .

  • useReducer

    • Redux in a function component
    const FuncComponent = () = > {   
   const [ count , dispatchCount ] = useReducer((state,action) = >{
       const { payload , type  } = action
       switch(type){
           case 'add':
               return state + 1
           case 'sub':
               return state - 1 
           case 'reset':
             return payload;
       }
      return state;
   },0);
   
   return(<div>... </dix>) }Copy the code

  • useCallback

    • For caching functions, methods in the component are redeclared when the component is re-rendered. For example, when we need to pass a method from the parent component to the child component, the parent component’s re-rendering will cause the child component to re-render unnecessarily, even if we use PureComponent in the child component.

  • useMemo

    • Used to get values that need to be computed and depend on a state, and to recalculate the current value based on dependency changes, it is indeed similar to vUE’s computed property in this respect;

  • useRef

    • CreateRef gets an instance of the binding ref element.
    • Cache data, usestate | useReducer is can save the current data, but they update the data function is bound to make the whole components to render, and internal statement of hooks to a variable in the function components, the component declaration and assignment to render will be back, If we want to save the data quietly without having to re-render the function, we can use it to save the data;

  • useImperativeHandle

Use rules for hooks

  • Never call hooks in loops, conditions, or nested functions. Always call them at the top of your React function.

  • Do not call a Hook in a normal JavaScript function, that is:

    • Call a Hook in the React function component
    • Call other hooks in custom hooks