* useCallback - 缓存的是勾子函数 * useMemo - 缓存的是返回值 ``` type DependencyList = ReadonlyArray<any>; function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T; function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T; ``` 举个🌰 不使用hook的代码： ``` import React, { FC, useCallback, useMemo, useState } from 'react'; const Index: FC = (props) => { const [count, setCount] = useState(0); const isEvenNumber = count % 2 === 0; const onClick = () => setCount(count + 1); return ( <div> <div>{count} is {isEvenNumber ？ 'even':'odd'} number</div> <button onClick={onClick}></button> </div> ); }; ``` 使用hook的代码： ``` import React, { FC, useCallback, useMemo, useState } from 'react'; const Index: FC = (props) => { const [count, setCount] = useState(0); const isEvenNumber = useMemo(() => { return count % 2 === 0; }, [count]); const onClick = useCallback(() => { setCount(count + 1); }, [count]); return ( <div> <div>{count} is {isEvenNumber ？ 'even':'odd'} number</div> <button onClick={onClick}></button> </div> ); }; ``` 作用： 1. 每次组件 re-render 的时候，不需要重新计算isEventNumber的值 2. 每次组件 re-render 的时候，不需要重新创建 onclick 这个函数 3. 重复渲染时的无效计算