react hooks 全面转换攻略(二) react本篇剩余 api

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);

在此示例中，呈现 的父组件将可以调用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 篇中讲述