您现在的位置是：亿华云 > IT科技类资讯

这些 Hook 更优雅地管理你的状态

亿华云2025-10-03 06:31:50【IT科技类资讯】0人已围观

简介今天我们来聊聊 ahooks 中那些可以帮助我们更优雅管理我们 state状态）的那些 hook。一些比较特殊的，比如 cookie/localStorage/sessionStorage，useUr

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

管理 object 类型 state 的更优管理 Hooks，用法与 class 组件的雅地 this.setState 基本一致。

这些 Hook 更优雅地管理你的状态

先来了解一下可变数据和不可变数据的更优管理含义和区别如下：

这些 Hook 更优雅地管理你的状态

可变数据(mutable)即一个数据被创建之后，可以随时进行修改，雅地修改之后会影响到原值。更优管理不可变数据(Immutable) 就是雅地一旦创建，就不能再被更改的更优管理数据。对Immutable 对象的雅地任何修改或添加删除操作都会返回一个新的Immutable 对象。

我们知道，更优管理React Function Components 中的 State 是不可变数据。所以我们经常需要写类似如下的代码：

这些 Hook 更优雅地管理你的状态

setObj((prev) => ({

...prev,

others: {

...prev.others,

age: 27,

}

}));

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

setObj((prev) => ({

others: {

age: 27,

}

}));

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

调用设置值方法的时候，站群服务器会根据传入的值是否为函数。如果是函数，则入参为旧状态，输出新的状态。否则直接作为新状态。这个符合 setState 的使用方法。使用对象拓展运算符，返回新的对象，保证原有数据不可变。const useSetState = >(

initialState: S | (() => S),

): [S, SetState~~] => {~~

const [state, setState] = useState~~(initialState);~~

// 合并操作，并返回一个全新的值

const setMergeState = useCallback((patch) => {

setState((prevState) => {

// 新状态

const newState = isFunction(patch) ? patch(prevState) : patch;

// 也可以通过类似 Object.assign 的方式合并

// 对象拓展运算符，返回新的对象，保证原有数据不可变

return newState ? { ...prevState, ...newState } : prevState;

});

}, []);

return [state, setMergeState];

};

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

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

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

使用如下：

const [person, updatePerson] = useImmer({

age: 33

});

function updateName(name) {

updatePerson(draft => {

draft.name = name;

});

}

function becomeOlder() {

updatePerson(draft => {

draft.age++;

});

}

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

useBoolean 和 useToggle

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

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

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

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

先看 useToggle。

这里使用了 typescript 函数重载声明入参和出参类型，根据不同的入参会返回不同的源码下载结果。比如第一个入参为 boolean 布尔值，则返回一个元组，第一项为 boolean 值，第二个为更新函数。优先级从上到下依次变低。入参可能有两个值，第一个为默认值（认为是左值），第二个是取反之后的值（认为是右值），可以不传，不传的时候，则直接根据默认值取反!defaultValue。toggle 函数。切换值，也就是上面的左值和右值的转换。set。直接设置值。setLeft。设置默认值（左值）。setRight。如果传入了 reverseValue, 则设置为 reverseValue。否则设置为 defautValue 的取反值。// TS 函数重载的使用

function useToggle(): [boolean, Actions];

function useToggle(defaultValue: T): [T, Actions];

function useToggle(defaultValue: T, reverseValue: U): [T | U, Actions];

function useToggle(

// 默认值

defaultValue: D = false as unknown as D,

// 取反

reverseValue?: R,

) {

const [state, setState] = useState(defaultValue);

const actions = useMemo(() => {

const reverseValueOrigin = (reverseValue === undefined ? !defaultValue : reverseValue) as D | R;

// 切换 state

const toggle = () => setState((s) => (s === defaultValue ? reverseValueOrigin : defaultValue));

// 修改 state

const set = (value: D | R) => setState(value);

// 设置为 defaultValue

const setLeft = () => setState(defaultValue);

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

const setRight = () => setState(reverseValueOrigin);

return {

toggle,

set,

setLeft,

setRight,

};

// useToggle ignore value change

// }, [defaultValue, reverseValue]);

}, []);

return [state, actions];

}

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

export default function useBoolean(defaultValue = false): [boolean, Actions] {

const [state, { toggle, set }] = useToggle(defaultValue);

const actions: Actions = useMemo(() => {

const setTrue = () => set(true);

const setFalse = () => set(false);

return {

toggle,

set: (v) => set(!!v),

setTrue,

setFalse,

};

}, []);

return [state, actions];

}usePrevious

保存上一次状态的 Hook。

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

维护两个状态 prevRef（保存上一次的状态）和 curRef（保存当前状态）。状态变更的时候，使用 shouldUpdate 判断是否发生变化，默认通过Object.is 判断。开发者可以自定义 shouldUpdate 函数，并决定什么时候记录上一次状态。状态发生变化，更新 prevRef 的值为上一个 curRef，并更新 curRef 为当前的状态。const defaultShouldUpdate = (a?: T, b?: T) => !Object.is(a, b);

function usePrevious(

state: T,

shouldUpdate: ShouldUpdateFunc= defaultShouldUpdate,

): T | undefined {

// 使用了 useRef 的特性，一直保持引用不变

// 保存上一次值

const prevRef = useRef();

// 当前值

const curRef = useRef();

// 自定义是否更新上一次的值

if (shouldUpdate(curRef.current, state)) {

prevRef.current = curRef.current;

curRef.current = state;

}

return prevRef.current;

}useRafState

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

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

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

重点看 setRafState 方法，它执行的时候，会取消上一次的 setRafState 操作。重新通过 requestAnimationFrame 去控制 setState 的执行时机。另外在页面卸载的时候，会直接取消操作，避免内存泄露。function useRafState~~(initialState?: S | (() => S)) {~~

const ref = useRef(0);

const [state, setState] = useState(initialState);

const setRafState = useCallback((value: S | ((prevState: S) => S)) => {

cancelAnimationFrame(ref.current);

ref.current = requestAnimationFrame(() => {

setState(value);

});

}, []);

// unMount 的时候，去除监听

useUnmount(() => {

cancelAnimationFrame(ref.current);

});