摘要：不知道大家有沒有使用過他的作用和中的差不多吧在需要讀取的高度寬度的時候特別需要說到現(xiàn)在基本已經(jīng)講完了除了我將會放在篇中講述相關(guān)文章全面轉(zhuǎn)換攻略一本篇之全面轉(zhuǎn)換攻略二本篇剩余全面轉(zhuǎn)換攻略三全局存儲解決方案
useCallback,useMemo
因?yàn)檫@兩個 api 的作用是一樣的,所以我放在一起講;
語法:
function useMemo(factory: () => T, deps: DependencyList | undefined): T;
function useCallback any>(callback: T, deps: DependencyList): T;
區(qū)別在于第一個參數(shù),還有參數(shù)的傳遞,另外 useCallback 中 DependencyList 是一個必須值
這兩個 api 的作用基本就是緩存數(shù)據(jù)/方法
使用過 react 的人都知道,在組件傳遞值的時候,如果 props 中某一值對象引用發(fā)生變化,就會發(fā)生重新渲染,即使前后2個對象是完全相同的;
這2個參數(shù)就是為了解決這個問題,另外也有可以減輕一些方法的rerender的速度;
useRef
作用基本是取代 class 中的 createRef,在此不多細(xì)說
useContext
作用基本是取代 class 中的 Context 中 Context.Provider ,接受參數(shù) Context,因?yàn)榭赡軙卸鄬?context,所以這個參數(shù)是必須的,不然無法辨別
useImperativeHandle
語法:
function useImperativeHandle(ref: Ref|undefined, init: () => R, deps?: DependencyList): void;
官網(wǎng)是叫 useImperativeMethods,但是我在 @types/[email protected] 中,是叫做 useImperativeHandle的,不過函數(shù)名還是以實(shí)際為準(zhǔn)
在官網(wǎng)中,他的作用是這樣解釋的:
useImperativeMethods自定義使用ref時公開給父組件的實(shí)例值。 與往常一樣，在大多數(shù)情況下應(yīng)避免使用refs的命令式代碼。
這個 api 的使用必定伴隨著 forwardRef 這個 api, 使用率基本較低;
官方例子:
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeMethods(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return ;
}
FancyInput = forwardRef(FancyInput);
在此示例中，呈現(xiàn)的父組件將能夠調(diào)用fancyInputRef.current.focus（）。
簡單的說就是講子組件中的創(chuàng)建方法暴露給父組件
useMutationEffect
簽名與useEffect相同，但在更新兄弟組件之前，它在React執(zhí)行其DOM突變的同一階段同步觸發(fā)。 使用它來執(zhí)行自定義DOM突變。
同樣的 @types/[email protected] 沒有這個函數(shù)的聲明;
不過官網(wǎng)中 大多是告誡盡量少用此函數(shù)
useLayoutEffect
語法:
function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
參數(shù)基本和 useEffect 相同
官方所說的效果:
簽名與useEffect相同，但在所有DOM突變后它會同步觸發(fā)。 使用它從DOM讀取布局并同步重新渲染。 在瀏覽器有機(jī)會繪制之前，將在useLayoutEffect內(nèi)部計劃的更新將同步刷新。
不知道大家有沒有使用過 vue,他的作用和 vue 中的 nexttick 差不多吧;
在需要讀取 dom 的高度,寬度的時候特別需要
說到現(xiàn)在, api 基本已經(jīng)講完了,除了 useReducer, 我將會放在 redux 篇中講述
相關(guān)文章:
react hooks 全面轉(zhuǎn)換攻略(一) react本篇之useState,useEffect
react hooks 全面轉(zhuǎn)換攻略(二) react本篇剩余 api
react hooks 全面轉(zhuǎn)換攻略(三) 全局存儲解決方案
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103538.html
