![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Hook
神奇大叔
这个作者很懒,什么都没留下…
展开
-
Hook 实现 componentWillMount
【代码】Hook 实现 componentWillMount。原创 2024-07-17 14:06:29 · 146 阅读 · 0 评论 -
React useSyncExternalStore 的自定义实现
React useSyncExternalStore 的自定义实现。原创 2022-11-16 11:03:16 · 360 阅读 · 0 评论 -
ReactHook useSyncExternalStore、useInsertionEffect
.提供给第三方库使用的hook1、useSyncExternalStore .以一种与选择性hydration、时间切片等并发渲染特性兼容的方式,去读取和订阅额外的数据源 const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?); subscribe:当store改变后触发的回调 getSnapshot:返回store当前的state getServerSnapshot:服务器渲染期间原创 2022-03-31 17:29:17 · 1749 阅读 · 0 评论 -
ReactHook useTranstion、useDeferredValue、useId
都是基于react18的transition过渡任务产生,详情见startTransition文章useTranstion 将函数中的内容过渡,类比useCallback const [ isPending , startTransition ] =useTransition() isPending:过度任务状态,true代表过渡中,false过渡结束 startTransition:执行的过渡任务 startTransition(()=>{ ... }) useD原创 2021-11-19 18:50:48 · 1808 阅读 · 0 评论 -
react-query 水化hydration/Hydrate、脱水hydration/dehydrate
import { hydrate,... } from 'react-query/hydration'脱水: dehydrate 创建缓存的冷冻表示,稍后可以用Hydrate、useHydrate或hydrate对其进行水化。 这对于将预取的查询从服务器传递到客户机或将查询持久化到localstorage或其他持久化位置非常有用。默认情况下,它只包含当前成功的查询。 const dehydratedState = dehydrate(queryClient, { 要脱水的QueryClient原创 2021-03-21 21:38:15 · 692 阅读 · 0 评论 -
react-query 自定义查询焦点状态FocusManager、自定义在线状态OnlineManager、自定义输出setLogger
1、自定义焦点事件: 粗浅理解:自定义焦点后,能根据自定义的焦点获取时,使得react-query能重新获取状态 例子为默认焦点设置: import { focusManager } from 'react-query' focusManager.setEventListener(handleFocus => { if (typeof window !== 'undefined' && window.addEventListener) { win原创 2021-03-21 20:52:32 · 272 阅读 · 0 评论 -
react-query query监听器
1、QueryObserver 监听key对应的查询,返回查询状态等信息 const observer = new QueryObserver(queryClient, { queryKey:key, 其他配置内容和useQuery相同 }) const unsubscribe = observer.subscribe(result => { console.log(result) unsubscribe() 取消监听 })2、InfiniteQuer原创 2021-03-21 20:19:51 · 750 阅读 · 0 评论 -
react-query 辅助性hook、queryClient属性方法、useQueryClient、QueryClientProvider、QueryCache、MutationCache
(1)useIsFetching 返回应用程序在后台加载或获取的查询的数量(对于应用程序范围内的加载指示器很有用)。 const isFetching = useIsFetching() 返回所有数目 const isFetching = useIsFetching(key,{配置过滤对象}) 返回key开头的数目 配置过滤对象: exact:true, 是否开启精确匹配 active:ture, 匹配活跃查询 inactive:true, 匹配不活跃查询 stale:true原创 2021-03-21 15:26:53 · 3397 阅读 · 0 评论 -
react-query 插件persistQueryClient、broadcastQueryClient
这些插件目前都是实验阶段1、persistQueryClient 用于持久化queryClient的状态及其缓存以供以后使用。 可以使用不同的持久程序persistors来存储客户端和缓存到许多不同的存储层 使用: (1)导入 import { persistQueryClient } from 'react-query/persistQueryClient-experimental' import { createLocalStoragePersistor } from 'reac原创 2021-03-21 14:05:51 · 337 阅读 · 0 评论 -
react-query 查询错误边界处理
让查询知道您希望在发生某些错误后重新呈现时再次尝试(1)错误边界组件使用react-error-boundary cnpm install -D react-error-boundary import { ErrorBoundary } from 'react-error-boundary' (2)使用reset处理查询错误 方式一:当使用组件时,它将重置组件边界内的任何查询错误 import { QueryErrorResetBoundary } from 'react-qu原创 2021-03-20 22:49:21 · 399 阅读 · 0 评论 -
react-query 修改服务器状态请求Mutation
通常用于创建/更新/删除数据或执行服务器副作用(1)useMutation const mutation=useMutation((参数)=>{ 向服务器提起修改请求,如 axios.get('/todos', {params:参数}); return 修改后的返回结果 }) mutation.mutate函数是一个异步函数,这意味着你不能在事件回调中直接使用它,如果需要event,需要在外部包裹一个函数 const onSubmit = event => {原创 2021-03-19 11:03:47 · 2828 阅读 · 0 评论 -
react-query 请求服务器状态管理配置、query查询请求、query设置过期、预拉取、缓存读取等设置
作用: 缓存…(可能是编程中最难做的事情) 将多个对相同数据的请求重复删除为一个请求 在后台更新过期数据 知道什么时候数据“过时了” 尽可能快地反映数据更新 性能优化,如分页和延迟加载数据 管理服务器状态的内存和垃圾收集 使用结构化共享记忆查询结果...原创 2021-03-15 22:56:04 · 2667 阅读 · 0 评论 -
ReactHook hooks和定时器产生的bug
问题1:使用定时器改变state,state的值并不是最新值例: const _onClick = function () { setInterval(() => { console.log(value); setValue(value + 1); },1000) }产生原因:因为每次setValue后会重新创建函数,由于并没有及时清理掉setInterval,setInterval执行的上下文环境都是第一次创建本函数式组件的上下原创 2020-12-06 23:30:26 · 1498 阅读 · 0 评论 -
ReactHook 关于依赖项的说明
当使用hooks时,依赖项改变才触发hooks的改变是指(依赖项的其中一个改变): 依赖项更新:重新创建hooks内函数,将函数内的所有状态更新为当前的最新值 依赖项不更新:函数会一直缓存,即内部的状态值是第一次创建后的状态值,和整个函数组件的状态值不同步 场景:在不依赖的函数中,依旧可以设置状态,即做一些不需要依赖最新状态的操作(如设置某个状态一直为true)代码示例: const _onClick = useCallback(() => { console.log('原创 2020-11-26 21:29:21 · 1450 阅读 · 0 评论 -
ReactHook ImperativeHandleHook以及React.forwardRef
React.forwardRef 使得父组件能够操作子组件的ref 1、子组件 const 子组件 = React.forwardRef((props, ref) => { return( <div> <input ref={ref} type="text" /> <button>{props.children}</button> </div> ) }); 2、原创 2020-06-24 00:05:14 · 569 阅读 · 0 评论 -
ReactHook useMemo
类似Vue的计算属性,当依赖项中的useState的数据改变,重新渲染函数时,会重新调用函数,返回新的值,否则会一直使用缓存的旧值1、引入 import React, {Component,useContext } from 'react';2、使用 const memoizedValue = useMemo((参数) => { return x...; }, [x]);代码示例:const set = new Set();function App(){原创 2020-06-23 23:28:06 · 396 阅读 · 1 评论 -
ReactHook CallbackHook
用于改善回调函数,当依赖项更新时才会重新渲染返回新的函数否则会一直使用缓存的旧函数1、引入 import React, {Component,useContext } from 'react';2、定义 const memoizedCallback = useCallback((参数) => { 操作 }, [变量,变量,...]); 当依赖项改变时,才会执行回调3、使用 <button onClick={memoizedCallback}>click&l原创 2020-06-23 23:12:34 · 428 阅读 · 0 评论 -
ReactHook ReducerHook
1、创建action-type.js文件 用途: 用来放置action的type属性的常量 export const XX='XX'2、创建actions.js (1)引入action-type.js import { xx,xx,.. } from "./action-type"; (2)通过函数返回action对象 export const xx=(数据参数)=>({type:XX,data:参数}); 其中:除了type属性外其他可自定义3原创 2020-06-23 22:06:04 · 649 阅读 · 0 评论 -
ReactHook Hook规则
1、Hook必须放在函数顶部2、不要将HooK放进if等条件判断语句内3、Hook的参数个数和位置要一一对应原创 2020-06-23 20:24:08 · 379 阅读 · 0 评论 -
ReactHook 自定义Hook
自定义Hook本质上就是自定义函数,内部搭配Hook的StateHook等内置方法但是注意,自定义Hook必须要以use开头,React将自动检测是否符合Hook规则代码示例:import React,{useState} from 'react'function useMyself(id){ const [state,setState] =useState(0); if(state.id===id) { return true } }...原创 2020-06-23 20:22:07 · 410 阅读 · 0 评论 -
ReactHook ContextHook
和context作用相同,可以解决多层组件传递参数1、引入 import React, {Component,useContext } from 'react';2、定义Context const xx=React.createContext(初始值);3、改变初始值 组件中 <xx.Provider value ={值}> ... </xx.Provider> 4、获取参数 const x =useContext(xx); {x}代码示例原创 2020-06-23 17:09:05 · 941 阅读 · 0 评论 -
ReactHook RefHook
除了可以进行ref操作以外,还能进行数据存储的操作1、引入 import React, { Component,useRef } from 'react';2、使用ref const xx=useRef(任意内容); 在标签上: ref={inputEL} 3、操作ref xx.current.dom操作 4、若使用ref容器存储数据,即当作this来使用 const xx=useRef(初始数据); 改变数据:xx.current=数据; 获取数据:xx.cu原创 2020-06-23 16:55:48 · 4338 阅读 · 1 评论 -
ReactHook EffectHook
副作用操作,使得函数组件能够进行生命周期的操作可以看作是以下生命周期函数的结合: componentDidMount,componentDidUpdate 和 componentWillUnmount 会在每次组件挂载时、数据改变后、组件卸载前执行1、引入 import React, { Component,useEffect } from 'react';2、使用 useEffect(()=>{ 操作; }) 3、若要清除副作用(如定时器,取消订阅等) useEff原创 2020-06-23 16:33:21 · 208 阅读 · 0 评论 -
ReactHook StateHook
Hook使得函数组件能使用state以及类组件其他特性1、引入 import React, { Component,useState } from 'react'; 2、定义状态 const [x, xx] = useState(参数); const [x2, xx2] = useState(参数); useState返回一个数组,并且数组里面固定有两个元素 第一个元素为设置的状态参数 第二个元素为设置新的状态数据的函数 每次改变状态后都会重新渲染函数组件,再次调用useState原创 2020-06-23 15:54:54 · 265 阅读 · 0 评论