knowledge

  • HookBegan in16.8 the React
  • HookNot in theclassThe use of
  • Can only be called from the outermost layer of the React component functionHook(customHookException), cannot be called in loops, conditional judgments, or subfunctions
  • HookThe update function returned is similarthis.setStateBut will not be old and newstateMerge, and herestateIt doesn’t have to be an object
  • If the name of the function isuseStart and call otherHookThis is a customizationHook
  • ReactGuaranteed every runeffectAt the same time,DOMAll have been updated
  • effectThe cleanup phase is performed on each re-render,ReactWill be executed in the currenteffectI had one beforeeffectTo remove
  • Customization between different componentsHookDon’t sharestate

The learning

  • Why do you need to go in the first placeHookBecause this one is a little hard to understand, let’s go and have a lookHookWhat can you do, think while you’re watchingHookThe advantages of

legacy

  1. HookTechnology makes it impossible to writeclassIn case of usestateBecomes possible (code below). But to be honest, the first time I saw this code, I had no idea how it worked.setCountHow does it trigger the component redraw without telling 
    import React, { useState } from 'react';

function Example() {
  // Declare a new state variable called "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()= > setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Copy the code
  2. ReactThe official documentation says it depends on the order of Hook callsstate 和 useStateWhy do we need to know the corresponding relationship between the two? This puzzled me.
  3. useCallback,useMemo,useRefThe three apis lack examples and are unreadable when read