1.这些hook更优雅的源码管理你的状态
2.大家都能看得懂的源码 - ahooks 是怎么处理 DOM 的？

这些hook更优雅的管理你的状态

       本文是深入浅出ahooks源码系列文章的第十二篇，这个系列的源码目标主要有以下几点：

       加深对Reacthooks的理解。

       学习如何抽象自定义hooks。源码构建属于自己的源码Reacthooks工具库。

       培养阅读学习源码的源码习惯，工具库是源码隐藏网址源码一个对源码阅读不错的选择。

       今天我们来聊聊ahooks中那些可以帮助我们更优雅管理我们state（状态）的源码那些hook。一些比较特殊的源码，比如cookie/localStorage/sessionStorage，源码useUrlState等，源码我们已经单独拿出来细讲了，源码感兴趣可以看看笔者的源码历史文章。

useSetState

       管理object类型state的源码Hooks，用法与class组件的源码this.setState基本一致。

       先来了解一下可变数据和不可变数据的源码含义和区别如下：

       可变数据(mutable)即一个数据被创建之后，可以随时进行修改，修改之后会影响到原值。

       不可变数据(Immutable)就是app平台+源码一旦创建，就不能再被更改的数据。对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutable对象。

       我们知道，ReactFunctionComponents中的State是不可变数据。所以我们经常需要写类似如下的代码：

setObj((prev)=>({ ...prev,name:'Gopal',others:{ ...prev.others,age:'',}}));

       通过useSetState，可以省去对象扩展运算符操作这个步骤，即：

setObj((prev)=>({ name:'Gopal',others:{ age:'',}}));

       其内部实现也比较简单，如下所示：

       调用设置值方法的时候，会根据传入的值是否为函数。如果是函数，则入参为旧状态，输出新的状态。否则直接作为新状态。这个符合setState的使用方法。

       使用对象拓展运算符，返回新的对象，保证原有数据不可变。美洽+源码

constuseSetState=<SextendsRecord<string,any>>(initialState:S|(()=>S),):[S,SetState<S>]=>{ const[state,setState]=useState<S>(initialState);//合并操作，并返回一个全新的值constsetMergeState=useCallback((patch)=>{ setState((prevState)=>{ //新状态constnewState=isFunction(patch)?patch(prevState):patch;//也可以通过类似Object.assign的方式合并//对象拓展运算符，返回新的对象，保证原有数据不可变returnnewState?{ ...prevState,...newState}:prevState;});},[]);return[state,setMergeState];};

       可以看到，其实就是将对象拓展运算符的操作封装到内部。

       还有其他更优雅的方式？我们可以使用use-immer

       useImmer(initialState)非常类似于useState。该函数返回一个元组，元组的第一个值是当前状态，第二个是updater函数，它接受一个immerproducer函数或一个值作为参数。

       使用如下：

const[person,updatePerson]=useImmer({ name:"Michel",age:});functionupdateName(name){ updatePerson(draft=>{ draft.name=name;});}functionbecomeOlder(){ updatePerson(draft=>{ draft.age++;});}

       当向更新函数传递一个函数的时候，draft参数可以自由地改变，直到producer函数结束，所做的改变将是不可变的，并成为下一个状态。这更符合我们的使用习惯，可以通过draft.xx.yy的论坛+源码+。net方式更新我们对象的值。

useBoolean和useToggle

       这两个都是特殊情况下的值管理。

       useBoolean，优雅的管理boolean状态的Hook。

       useToggle，用于在两个状态值间切换的Hook。

       实际上，useBoolean又是useToggle的一个特殊使用场景。

       先看useToggle。

       这里使用了typescript函数重载声明入参和出参类型，根据不同的入参会返回不同的结果。比如第一个入参为boolean布尔值，则返回一个元组，第一项为boolean值，第二个为更新函数。优先级从上到下依次变低。

       入参可能有两个值，第一个为默认值（认为是网站源码+授权左值），第二个是取反之后的值（认为是右值），可以不传，不传的时候，则直接根据默认值取反!defaultValue。

       toggle函数。切换值，也就是上面的左值和右值的转换。

       set。直接设置值。

       setLeft。设置默认值（左值）。

       setRight。如果传入了reverseValue,则设置为reverseValue。否则设置为defautValue的取反值。

//TS函数重载的使用functionuseToggle<T=boolean>():[boolean,Actions<T>];functionuseToggle<T>(defaultValue:T):[T,Actions<T>];functionuseToggle<T,U>(defaultValue:T,reverseValue:U):[T|U,Actions<T|U>];functionuseToggle<D,R>(//默认值defaultValue:D=falseasunknownasD,//取反reverseValue?:R,){ const[state,setState]=useState<D|R>(defaultValue);constactions=useMemo(()=>{ constreverseValueOrigin=(reverseValue===undefined?!defaultValue:reverseValue)asD|R;//切换stateconsttoggle=()=>setState((s)=>(s===defaultValue?reverseValueOrigin:defaultValue));//修改stateconstset=(value:D|R)=>setState(value);//设置为defaultValueconstsetLeft=()=>setState(defaultValue);//如果传入了reverseValue,则设置为reverseValue。否则设置为defautValue的反值constsetRight=()=>setState(reverseValueOrigin);return{ toggle,set,setLeft,setRight,};//useToggleignorevaluechange//},[defaultValue,reverseValue]);},[]);return[state,actions];}

       而useBoolean是对useToggle的一个使用。如下，比较简单，不细说

exportdefaultfunctionuseBoolean(defaultValue=false):[boolean,Actions]{ const[state,{ toggle,set}]=useToggle(defaultValue);constactions:Actions=useMemo(()=>{ constsetTrue=()=>set(true);constsetFalse=()=>set(false);return{ toggle,set:(v)=>set(!!v),setTrue,setFalse,};},[]);return[state,actions];}usePrevious

       保存上一次状态的Hook。

       其原理，是每次状态变更的时候，比较值有没有发生变化，变更状态：

       维护两个状态prevRef（保存上一次的状态）和curRef（保存当前状态）。

       状态变更的时候，使用shouldUpdate判断是否发生变化，默认通过Object.is判断。开发者可以自定义shouldUpdate函数，并决定什么时候记录上一次状态。

       状态发生变化，更新prevRef的值为上一个curRef，并更新curRef为当前的状态。

constdefaultShouldUpdate=<T>(a?:T,b?:T)=>!Object.is(a,b);functionusePrevious<T>(state:T,shouldUpdate:ShouldUpdateFunc<T>=defaultShouldUpdate,):T|undefined{ //使用了useRef的特性，一直保持引用不变//保存上一次值constprevRef=useRef<T>();//当前值constcurRef=useRef<T>();//自定义是否更新上一次的值if(shouldUpdate(curRef.current,state)){ prevRef.current=curRef.current;curRef.current=state;}returnprevRef.current;}useRafState

       只在requestAnimationFramecallback时更新state，一般用于性能优化。

       window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

       假如你的操作是比较频繁的，就可以通过这个hook进行性能优化。

       重点看setRafState方法，它执行的时候，会取消上一次的setRafState操作。重新通过requestAnimationFrame去控制setState的执行时机。

       另外在页面卸载的时候，会直接取消操作，避免内存泄露。

functionuseRafState<S>(initialState?:S|(()=>S)){ constref=useRef(0);const[state,setState]=useState(initialState);constsetRafState=useCallback((value:S|((prevState:S)=>S))=>{ cancelAnimationFrame(ref.current);ref.current=requestAnimationFrame(()=>{ setState(value);});},[]);//unMount的时候，去除监听useUnmount(()=>{ cancelAnimationFrame(ref.current);});return[state,setRafState]asconst;}useSafeState

       用法与React.useState完全一样，但是在组件卸载后异步回调内的setState不再执行，避免因组件卸载后更新状态而导致的内存泄漏。

       代码如下：

       在更新的时候，通过useUnmountedRef判断如果组件卸载，则停止更新。

functionuseSafeState<S>(initialState?:S|(()=>S)){ //判断是否卸载constunmountedRef=useUnmountedRef();const[state,setState]=useState(initialState);constsetCurrentState=useCallback((currentState)=>{ //如果组件卸载，则停止更新if(unmountedRef.current)return;setState(currentState);},[]);return[state,setCurrentState]asconst;}

       useUnmountedRef这个我们之前提过，简单回顾下，其实就是在hook的返回值中标记组件为已卸载。

constuseUnmountedRef=()=>{ constunmountedRef=useRef(false);useEffect(()=>{ unmountedRef.current=false;//如果已经卸载，则会执行return中的逻辑return()=>{ unmountedRef.current=true;};},[]);returnunmountedRef;};useGetState

       给React.useState增加了一个getter方法，以获取当前最新值。

       其实现如下：

       其实就是通过useRef记录最新的state的值，并暴露一个getState方法获取到最新的。

setObj((prev)=>({ name:'Gopal',others:{ age:'',}}));0

       这在某一些情况下，可以避免React的闭包陷阱。如官网例子：

setObj((prev)=>({ name:'Gopal',others:{ age:'',}}));1

       假如这里不使用getCount()，而是直接使用count，是获取不到最新的值的。

总结与思考

       React的functionComponent的状态管理还是比较灵活，我们可以针对一些场景进行封装和优化，从而更优雅的管理我们的state状态，希望ahooks这些封装能对你有所帮助。

原文:/post/

大家都能看得懂的源码 - ahooks 是怎么处理 DOM 的？

       深入浅出ahooks源码系列文章之十三，完整文档地址如下。

       本文主要探讨ahooks在处理DOM类Hooks时的规范及源码实现。

       ahooks中的大部分DOM类Hooks会接收一个名为target的参数，用于表示要处理的元素。target可以接受三种类型：React.MutableRefObject（通过`useRef`保存的DOM）、`HTMLElement`、或者函数（用于SSR场景）。

       目标元素支持动态变化，这在实际应用中是常见的需求。

       ahooks通过`useTargetElement`方法实现目标元素的获取，兼容第一点的参数规范。

       `useEffectWithTarget`和`useLayoutEffectWithTarget`是针对第二点，支持target动态变化的实现，分别调用`createEffectWithTarget`函数。

       在`packages/hooks/src/utils/useEffectWithTarget.ts`和`packages/hooks/src/utils/useLayoutEffectWithTarget.ts`中，`useEffect`和`useLayoutEffect`被调用，它们在内部封装处理逻辑。

       `createEffectWithTarget`是核心函数，用于创建相应的副作用效果。

       总结，ahooks通过规范的输入输出，支持丰富的DOM操作场景，内部进行封装处理，使用户能快速上手并灵活运用。

       本文已收录至个人博客，欢迎关注。