Summary of common hooks

1、useEffact

Reference resources ：https://www.cnblogs.com/guanghe/p/14178482.html

2、useState

effect ： Update variables , Trigger render.

const [loading, setLoading] = useState(true);

When loading Changes will trigger render.

3、useMemo

effect ： solve hooks It will trigger many useless rendering problems . If useMemo(fn, arr) The second parameter matches , And its value changes , Will be executed many times , Otherwise, execute only once , If it's an empty array [],fn Only once .

give an example ：

const db = useMemo(() => new Data(dbName), [dbName]); 

When dbName Render only when changes occur , Otherwise, only render once , Get the same value every time .

4、useRef

effect ： Save initialized constants , It will not change throughout the life cycle , And when updated current Value does not render , This is the useState Different places .

give an example ：

（1） Definition ：

const id = useRef({});

（2） Set up

onClick(()=>{
    id.current = 'xxxxx'
})

（3） obtain

const id = chooseList.current.id

5、useCallback

effect ： Avoid multiple update calls to functions . Usage and useState The usage of is basically the same , But in the end, it will return a function , Save it with a variable .

give an example ：

const getUser = useCallback(() => {
    return function() {
        
    }
}, [id])

Return function getUser Will be based on id Change by change , If id Never changed ,getUser And it won't regenerate .