react hooks 周全转换攻略(二) react本篇盈余 api

2024年5月27日 261次阅读 来源: Grewer

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 篇中报告

相干文章:

    原文作者：Grewer
    原文地址: https://segmentfault.com/a/1190000018864995
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞