useCallback,useMemo因为这两个 api 的作用是一样的,所以我放在一起讲;语法:function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;function useCallback<T extends (…args: any[]) => any>(callback: T, deps: DependencyList): T;区别在于第一个参数,还有参数的传递,另外 useCallback 中 DependencyList 是一个必须值这两个 api 的作用基本就是缓存数据/方法使用过 react 的人都知道,在组件传递值的时候,如果 props 中某一值对象引用发生变化,就会发生重新渲染,即使前后2个对象是完全相同的;这2个参数就是为了解决这个问题,另外也有可以减轻一些方法的rerender的速度;useRef作用基本是取代 class 中的 createRef,在此不多细说useContext作用基本是取代 class 中的 Context 中 Context.Provider ,接受参数 Context,因为可能会有多层 context,所以这个参数是必须的,不然无法辨别useImperativeHandle语法:function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;官网是叫 useImperativeMethods,但是我在 @types/react@17.8.7 中,是叫做 useImperativeHandle的,不过函数名还是以实际为准在官网中,他的作用是这样解释的:useImperativeMethods自定义使用ref时公开给父组件的实例值。 与往常一样，在大多数情况下应避免使用refs的命令式代码。这个 api 的使用必定伴随着 forwardRef 这个 api, 使用率基本较低;官方例子:function FancyInput(props, ref) { const inputRef = useRef(); useImperativeMethods(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} />;}FancyInput = forwardRef(FancyInput);在此示例中，呈现<FancyInput ref = {fancyInputRef} />的父组件将能够调用fancyInputRef.current.focus（）。简单的说就是讲子组件中的创建方法暴露给父组件useMutationEffect签名与useEffect相同，但在更新兄弟组件之前，它在React执行其DOM突变的同一阶段同步触发。 使用它来执行自定义DOM突变。同样的 @types/react@16.8.7 没有这个函数的声明; 不过官网中 大多是告诫尽量少用此函数useLayoutEffect语法:function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;参数基本和 useEffect 相同官方所说的效果:签名与useEffect相同，但在所有DOM突变后它会同步触发。 使用它从DOM读取布局并同步重新渲染。 在浏览器有机会绘制之前，将在useLayoutEffect内部计划的更新将同步刷新。不知道大家有没有使用过 vue,他的作用和 vue 中的 nexttick 差不多吧;在需要读取 dom 的高度,宽度的时候特别需要说到现在, api 基本已经讲完了,除了 useReducer, 我将会放在 redux 篇中讲述