js库笔记(一):swr & ahooks

介绍

  • swr原指stale-while-revalidate,是指一种http的缓存失效策略,属于Cache-Control参数(浏览器兼容性较差)。根据这种策略的思想,开发了js库-zeit/swr(本文均指swr库)。

swr

一、swr解决的问题:

1、多组件共用同一数据时,会在父组件请求一次,然后props形式 传给各个组件。

  • 解决方式:封装useSWR()为hooks,子组件使用时直接调用该hooks,即使多次调用也只会请求一次(因为使用相同的key,会被去重、共享、缓存)。重新聚焦页面或标签页切换时,会重新请求。

2、重新请求时机:

  • 默认在 切换浏览器标签页/电脑休眠后, 重新聚焦页面时,自动重新请求revalidateOnFocus=true
  • 使用useSWR() hooks的组件,重新显示在屏幕上时自动重新请求
  • 指定refreshInterval定时请求时间,重新请求。
  • 断网重连时,自动重新请求revalidateOnReconnect=true

3、更方便的预加载,不需要手写数据提前请求,swr内置缓存。

  • 可以将调用了useSWR()的组件,设置display:none,即可实现数据预加载。
function App () {
 const [pageIndex, setPageIndex] = useState(0);
 return <div>
   <Page index={pageIndex}/>
   <div style={{ display: 'none' }}><Page index={pageIndex + 1}/></div>
   <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
   <button onClick={() => setPageIndex(pageIndex + 1)}>Next</button>
 </div>
}

4、修改请求参数后,重新请求,需要多次触发。保留分页状态困难。

  • 解决方式: 使用useSWRInfinite();通过一个hooks触发多个请求。返回值比useSWR()多了sizesetSize
  • 通过useSWRInfinite();sizesetSize可以在返回表单页面时,自动恢复原来的分页状态

5、可结合React.Suspense使用。【实验功能】

  • 包含swr的组件渲染前,懒加载<Suspense>fallback

6、性能优化。

  • 主要表现在两个方面:内置缓存重复数据删除(相同key请求同一时间只发生一次)。
  • 默认使用stable-hash深度比较数据更改,如果data值未改变,则不会触发重新渲染
  • useSWR()返回的dataerrorisValidating三个值独立更新,同时使用会触发多次渲染(至少4次),推荐尽量少的同时使用三种状态。
  • 使用 tree-shaking,按需引入模块。

二、swr使用方法:

1、useSWR(): keyfetcher默认参数。

const { data, error, isValidating, mutate } = useSWR(key,fetcher,options);
  • 如果fetcher需要多个参数,key可设为数组,保证每次请求key都为最新值。
  • key也可设为对象。

2、全局配置: options 等同于 useSWR 第三个参数,多了provider参数。

  • 全局共用相同 fetcher,<Component/>内调用useSWR时,不必再传fetcher。
<SWRConfig value={options}>
  <Component/>
</SWRConfig>

3、禁用所有自动请求:(使用于静态数据请求)

import useSWRImmutable from 'swr/immutable';
useSWRImmutable(key, fetcher, options) //与useSWR共用相同fetcher
//等同于:
useSWR(key, fetcher, {
  revalidateIfStale: false, // swr在挂载并存在陈旧数据(缓存)时是否应重新请求
  revalidateOnFocus: false,
  revalidateOnReconnect: false
})

4、按需请求

  • keynull时,不请求。
const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher)

5、相同接口重新验证/调用:

  • mutate(key)key为需要验证useSWR()key值。
const { mutate } = useSWRConfig();
mutate('/api/user'); 
  • 绑定的mutate(data)data为更新的本地数据,并重新验证(请求)。
const { data, mutate } = useSWR('/api/user', fetcher);
mutate({ ...data, name: newName })

6、多种预请求方法:

  • 顶级页面预请求HTML<head>标签内设置ref="proload"
<link rel="preload" href="/api/data" as="fetch" crossorigin="anonymous">
  • 手动预请求: 使用全局的mute重新请求和设置缓存。
import { mutate } from 'swr';
mutate('/api/data', fetch('/api/data').then(res => res.json()))
  • 数据预填充fallbackData内设置请求响应前的已有数据。
useSWR('/api/data', fetcher, { fallbackData: prefetchedData })

7、中间件【在useSWR()前后执行的逻辑】

  • 全局或指定 options内的use参数设置中间件数组,数组顺序为中间件执行顺序。

8、swr默认使用全局缓存,在所有组件之间存储和共享数据。【也可自定义Provider,实现该功能】

  • options设置provider参数: { provider: () => new Map() }
  • 使用自定义的缓存时,访问缓存:
const { cache } = useSWRConfig()

cache.get(key) // 获取 key 的当前数据。
cache.clear()  // 清除所有缓存。SWR 将在重新渲染时重新请求。

*9、使用React Native时,页面聚焦可自定义。

  • 修改optionsinitFocusinitFocus参数。

ahooks

一、useRequest

ahooks的useRequest缓存等功能借鉴了swr的特性。

useRequest()默认参数及返回,与useSWR()类似:

const { data, error, loading } = useRequest(getUsername);

其中useRequest()第一个参数为fetcher。(useSWR()key

1、支持手动请求

默认为自动请求,返回data值;设置options.manual=true,通过返回的run()/runAsync()手动触发请求。

  • 适用场景:webgis开发中,点击地图内部元素查询详情等。
const { 
		data, loading, run, runAsync, params, cancel,
		refresh, // 使用上一次的params重新调用run
		refreshAsync, 
		mutate, //直接修改data
	} = useRequest(changeUsername, {
	    manual: true,
	    defaultParams: params, // 首次执行的默认参数
	    onBefore:()=>{}, // 请求前触发
	    onSuccess: (result, params) => {}, // 请求成功触发
	    onError:()=>{},  // 请求失败触发
	    onFinally:()=>{} // 请求后触发
  });
function changeUsername(name){} // fetchrer 接收run传递的参数
run('name'); //执行
refresh; // 执行刷新,传递参数仍为'name'
  • 也可使用runAsync(),返回Promise异步函数,但无法通过onSuccessonError捕捉处理结果。
  • mutate() 能够立即修改useRequest()返回的data数据,支持mutate(newData)mutate(oldData=>newData)两种写法。

2、支持请求取消

自动取消:

  • 使用useRequest()的组件卸载时,取消正在进行的请求。【非常适用于可视化项目组件中的地图图层请求
  • 竞态取消,上一次请求还未返回时,再次发起请求,会取消上一次的请求。

手动取消:

  • 调用useRequest返回的cancel函数。

3、参数管理

  • 若触发请求:run(1,2,3),则useRequest()返回的params等于[1,2,3]。只记录当前调用服务的参数,并不根据新的参数重新调用服务。

4、交互优化

useRequest第二参数的其他配置项:

  • 延迟loading渲染:延迟loading变为true的时间,避免页面上闪烁出"loading…"界面。设置loadingDelay,值为延迟时间(默认单位ms)。
  • 轮询请求:设置pollingInterval,值为轮询请求间隔时间(默认单位ms),通过cancel取消,run/runAsync启动。
  • 轮询错误重试:设置pollingErrorRetryCount,值为轮询错误重试次数。设置pollingWhenHidden,值为boolean,表示在页面隐藏时,是否继续轮询。【manual=true时,初始化不启动轮询,需要run触发。原理:请求完成后,等待pollingInterval时间,再发起下一次请求。】
  • 错误重试:设置retryCount,值为错误重试次数。设置retryInterval,值为重试时间间隔(单位ms)。默认值为:第n次请求时,2的n次方,最大值不超过30s。
  • 请求准备:设置readyfalse时,请求永远不会发出。
  • 依赖刷新:设置refreshDepsany[]时,监听数组内元素变化,变化后重新出发请求(等同于useEffect第二参数)。
  • 屏幕聚焦请求:默认关闭,设置refreshOnWindowFocustrue开启聚焦重新请求;设置focusTimespan,值为时间(单位ms),表示和上次请求间隔大于该时间,则重新请求。
  • 防抖:设置debounceWait,值为时间(单位ms),频繁触发run函数,只在最后一次触发结束后等待该时间再执行。debounceLeading:boolean,延迟开始前调用;debounceTrailing:boolean,延迟开始后调用;debounceMaxWait:number,允许被延迟的最大值;防抖等待执行的函数可被cancel中止。
  • 节流:设置throttleWait,值为时间(单位ms),该时间内频繁触发run函数,仅执行一次。throttleLeading:boolean,节流开始前调用;throttleTrailing:boolean,节流开始后调用;同样可被cancel中止。

5、swr缓存机制

swr机制:优先使用缓存数据,后台调用请求,请求到新数据后触发更新。

  • 设置cacheKey : string,值为唯一请求标识。staleTime:number值为时间(单位ms),该时间内值为新鲜的,不会重新请求;cacheTime: number值为数据缓存时间,超过该时间则清空该条缓存数据。
  • cacheKey的值全局共享,相同cacheKey在全局同时只会有一个在发起请求,其他的cacheKey共享返回数据,且内容会同步接受。
  • 参数缓存:设置cacheKey后,useRequest返回的params即为上次调用时的参数。
  • 删除缓存clearCache方法删除指定cacheKey的缓存数据。import {clearCache} from 'ahooks',若clearCache入参为空,则清空所有缓存数据;若入参为string[],清空数组内所有cacheKey
  • 自定义缓存方式:setCache和getCache配套使用;自定义缓存时,clearCache方法不生效。
const cacheKey = 'setCache-demo';
const { data, loading } = useRequest(getArticle, {
    cacheKey,
    setCache: (data) => localStorage.setItem(cacheKey, JSON.stringify(data)),
    getCache: () => JSON.parse(localStorage.getItem(cacheKey) || '{}'),
  });
  • 【注】:只有成功请求的数据才会被缓存;缓存数据包括dataparams

二、场景应用-常用hooks

只介绍应用场景,不介绍具体使用方式。

  • useAntdTable:封装了antd中的FormTable的联动逻辑。如:传给fetcher分页参数,以及表单筛选参数;支持表单缓存、表单验证、参数初始化等功能。``
  • useInfiniteScroll:无限滚动逻辑,向下滚动时发送请求。移动端列表显示场景,较为常用。
  • usePagination:类似useRequest,会给fetcher传入currentpageSize等参数,方便分页展示。
  • useDynamicList:对列表内容及每一条的增删改查,包含列表条目拖拽等功能。
  • useSelections:封装了antdCheckbox的联动逻辑。

三、场景应用-其他hooks

仅介绍用处。

  • useFusionTable:封装Fusion中的FormTable逻辑。
  • useVirtualList:大数据量列表渲染。内部监听滚动事件,实时计算列表可视范围,渲染可视范围内的列表条目,使得大数据量展示流畅。
  • useHistoryTravel:对value进行历史变化状态管理,包含撤销,重置,前进,跳转指定步数等功能。
  • useNetwork:获取网络信息,包含延迟、带宽估算、是否在线、网络类型(2g/3g/4g)等。
  • useCountDown:倒计时管理。获取到某个时间(几月几日几点)的剩余时间,或倒计时指定时间(几秒)。
  • useCounter:计数器。提供+1、-1、重置、设置数值等方法。
  • useTextSelection:获取用户当前选取文本的内容及位置(坐标)。
  • useWebSocket:处理websocket的hooks。提供了连接状态相关属性,及状态回调。

生命周期相关hooks:

  • useMount: 相当于useEffect(()=>{},[])
  • useUnmount:相当于useEffect(()=>()=>{ /*卸载函数*/ },[])
  • useUnmountedRef:获取当前组件是否已经卸载的boolean值。

四、状态管理hooks

常用:

  • useSetState:适用多个状态作为object的属性统一管理,只传入更新的属性即可。
  • useToggle:只能在两个值之间切换(useBoolean的扩展,使其不仅限于boolean类型)。
  • useUrlState:管理当前url,包含添加参数,修改参数、删除参数(将该参数值设为undefined)等。
  • useCookieState:对Cookies进行管理,包含过期时间、cookies设置等。
  • useLocalStorageState&useSessionStorageState:管理localStoragesessionStorage
  • useRafState:只在requestAnimationFrame回调时更新state,常用于性能优化。
  • useSafeState:与useState用法一致,可以避免组件卸载后更新状态而导致的内存泄漏。
  • useGetState:给useState增加了一个getter方法,以获取当前最新值(基于useRef实现)。

其他:

  • useBoolean:返回的数组第二个参数为三个方法,setTrue设为truesetFalse设为falsetoggle取反。
  • useMap:对Map类型状态管理。提供对Map类型值的增删改查等操作。
  • useSet:对Set类型对象状态管理。
  • usePrevious:对上一次的值/状态进行保存。
  • useDebounce&useThrottle:对进行防抖和节流处理。

五、执行副作用操作-Effect hooks

常用:

  • useUpdateEffect:用法同useEffect,但会忽略首次执行,仅在依赖更新时执行。
  • useUpdateLayoutEffect:用法同useLayoutEffect,仅依赖更新时执行。
  • useAsyncEffect:支持异步函数的useEffectuseAsyncEffect(async()=>{},[])
  • useDeepCompareEffect&useDeepCompareLayoutEffect:深比较(基于lodash/isEqualuseEffectuseLayoutEffect第二参数deps是否变化。
  • useInterval&useTimeout:基于useRef管理setIntervalsetTimeout,卸载时自带销毁定时器。
  • useRafInterval&useRafTimeout:基于requestAnimationFrame 实现定时器。
  • useUpdate:返回update函数,调用该函数会强制组件重新渲染。

其他:

  • useDebounceEffect&useThrottleEffect:给useEffect增加防抖/节流能力。
  • useDebounceFn&useThrottleFn:用来处理防抖/节流函数的hooks。
  • useLockFn:异步函数增加竞态锁,防止并发执行(函数执行完成前,其余的异步操作都会被忽略)。

六、副作用DOM相关操作

事件监听:

  • useEventListener:添加监听事件,包含键盘操作监听。
  • useKeyPress:监听键盘按键,支持组合键、按键别名。
  • useClickAway:监听除了目标元素外的点击事件,支持传入多个目标元素。
  • useDocumentVisibility:监听页面是否可见(最小化)。
  • useEventTarget:对表单控件内onChangevalue逻辑的封装。
  • useExternal:引入外部脚本,jscss资源。
  • useLongPress:监听目标元素长按事件。
  • useMouse:监听鼠标位置。
  • useResponsive:监听浏览器窗口响应式信息(窗口大小改变)。
  • useScroll:监听元素的滚动位置。
  • useFocusWithin:监听当前焦点是否在某个区域内。

DOM相关:

  • useDrop&useDraguseDrop单独使用可接收文件、文字和网址拖拽;useDrag允许DOM节点被拖拽,需配合useDrop使用。
  • useTitle&useFavicon:修改标签页title&favicon
  • useFullscreen:相当于F11的全屏。
  • useHover:监听dom元素是否有鼠标悬停。
  • useMutationObserver:监听指定dom树发生变化的hooks。
  • useInViewport:监听指定dom元素是否在可视区域内。
  • useSize:监听dom节点尺寸变化的hooks。

七、优化相关hooks

  • useControllableValue:管理组件内部状态是否受父组件控制。
  • useCreation:可替代useMemouseRef,对其性能隐患进行了优化。
  • useEventEmitter:可跨组件事件通知,共享事件。
  • useIsomorphicLayoutEffect:ssr模式下,替换useLayoutEffect ,可避免出现警告。
  • useLatest:返回当前最新hooks,避免闭包问题。
  • useMemoizedFn:替代useCallback,不需要deps参数,且函数地址不会变化。
  • useReactive:可替换useState,不需要setState,直接修改state即可。

debug:

  • useTrackedEffect:可追踪是哪个依赖出发了useEffect的执行。
  • useWhyDidYouUpdate:用来排查是哪个属性导致了组件的rerender
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
华为SWR(Software Repository)是华为公司推出的一种软件仓服务,为用户提供了一个集中存储和管理软件资产的平台。它能够帮助用户更好地实现软件的版本控制、团队协作以及开发、测试和部署等工作。 华为SWR公共仓是其中的一个功能模块,主要用于存储和共享华为公司提供的公共软件资产。公共仓中存放了各类应用程序、软件开发工具和框架等,用户可以直接从仓中下载和使用这些软件。 华为SWR公共仓的特点包括: 1. 丰富的软件资源:华为SWR公共仓中拥有多种类型的软件资源,包括操作系统、开发工具、运行等。用户可以根据自己的需求快速找到并下载这些资源,提高开发效率。 2. 安全可靠:华为SWR公共仓采取了严格的安全措施,保证仓中的软件资源的可信度和完整性。用户可以放心地使用这些软件,避免下载到恶意软件或存在漏洞的软件。 3. 高性能和可扩展性:华为SWR公共仓具备高性能和可扩展的特点,能够满足大规模软件发布和下载的需求。用户在使用公共仓时,可以享受到快速稳定的下载体验。 同时,华为SWR公共仓也为用户提供了一些额外的功能,比如软件版本管理、用户权限控制等。用户可以根据自己的需求进行相关设置,提高软件开发和管理的效率。 总之,华为SWR公共仓是华为公司提供的一个集中存储和管理软件资产的平台,可以帮助用户更好地进行软件开发和管理工作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值