状态

2025-09-23 React Hook

状态

createMemo — memoized hooks的工厂钩子
 useGetSet — 返回状态 getter get() 而不是原始状态
 useGetSetState — 就像 useGetSet 和 useSetState 有个孩子
 useObservable — 跟踪Observable的最新值
 useSetState — 创建类似this.setState的setState方法
 useToggle and useBoolean — 跟踪布尔值的状态
 useCounter and useNumber — 跟踪数字的状态
 useList — 跟踪数组的状态
 useMap — 跟踪对象的状态

`createMemo`

钩子（Hook）工厂，接收一个要被记忆的函数，返回一个带有记忆功能的 React 钩子，该钩子接收到相同的参数时返回和原始函数相同的结果。

用法

jsx 复制代码

import {createMemo} from 'react-use';

const fibonacci = n => {
  if (n === 0) return 1;
  if (n === 1) return 2;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

const useMemoFibonacci = createMemo(fibonacci);

const Demo = () => {
  const result = useMemoFibonacci(10);

  return (
    <div>
      fib(10) = {result}
    </div>
  );
};

参考

js 复制代码

const useMemoFn = createMemo(fn);

`useGetSet`

React 状态钩子，通过返回状态 getter 函数代替它本身的状态，从而防止在嵌套函数中使用状态时出现的细微错误。

用法

以下示例使用 useGetSet 在每次单击1秒后递增一个数字。

jsx 复制代码

import {useGetSet} from 'react-use';

const Demo = () => {
  const [get, set] = useGetSet(0);
  const onClick = () => {
    setTimeout(() => {
      set(get() + 1)
    }, 1_000);
  };

  return (
    <button onClick={onClick}>Clicked: {get()}</button>
  );
};

如果你使用常规的 useState 钩子以一种普简单的方式来做这个示例，当你快速多次单击，计数器将不会正确递增。

jsx 复制代码

const DemoWrong = () => {
  const [cnt, set] = useState(0);
  const onClick = () => {
    setTimeout(() => {
      set(cnt + 1)
    }, 1_000);
  };

  return (
    <button onClick={onClick}>Clicked: {cnt}</button>
  );
};

`useGetSetState`

useGetSet 和 useGetSetState 的混合。

用法

jsx 复制代码

import {useGetSetState} from 'react-use';

const Demo = () => {
  const [get, setState] = useGetSetState({cnt: 0});
  const onClick = () => {
    setTimeout(() => {
      setState({cnt: get().cnt + 1})
    }, 1_000);
  };

  return (
    <button onClick={onClick}>Clicked: {get().cnt}</button>
  );
};

`useObservable`

React state hook that tracks the latest value of an Observable.

用法

jsx 复制代码

import {useObservable} from 'react-use';

const counter$ = new BehaviorSubject(0);
const Demo = () => {
  const value = useObservable(counter$, 0);

  return (
    <button onClick={() => counter$.next(value + 1)}>
      Clicked {value} times
    </button>
  );
};

`useSetState`

React 状态钩子，用于创建和 this.setState 在类组件中作用相似的 setState 方法--它将更改的对象合并到当前状态中。

用法

jsx 复制代码

import {useSetState} from 'react-use';

const Demo = () => {
  const [state, setState] = useSetState({});

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={() => setState({hello: 'world'})}>hello</button>
      <button onClick={() => setState({foo: 'bar'})}>foo</button>
      <button 
        onClick={() => {
          setState((prevState) => ({
            count: (prevState.count || 0) + 1,
          }))
        }}
      >
        count
      </button>
    </div>
  );
};

参考

js 复制代码

const [state, setState] = useSetState({cnt: 0});

setState({cnt: state.cnt + 1});
setState((prevState) => ({
  cnt: prevState + 1,
}));

`useToggle`

React 状态钩子，用于追踪布尔型值。

useBoolean 是 useToggle 的别称。

用法

jsx 复制代码

import {useToggle, useBoolean} from 'react-use';

const Demo = () => {
  const [on, toggle] = useToggle(true);

  return (
    <div>
      <div>{on ? 'ON' : 'OFF'}</div>
      <button onClick={() => toggle()}>Toggle</button>
      <button onClick={() => toggle(true)}>set ON</button>
      <button onClick={() => toggle(false)}>set OFF</button>
    </div>
  );
};

`useCounter`

React 状态钩子，用于追踪数值型值。

useNumber 是 useCounter 的别称。

用法

jsx 复制代码

import {useCounter, useNumber} from 'react-use';

const Demo = () => {
  const [value, {inc, dec, get, set, reset}] = useCounter(5);

  return (
    <div>
      <div>{value} is {get()}</div>
      <button onClick={() => inc()}>Increment</button>
      <button onClick={() => dec()}>Decrement</button>
      <button onClick={() => inc(5)}>Increment (+5)</button>
      <button onClick={() => dec(5)}>Decrement (-5)</button>
      <button onClick={() => set(100)}>Set 100</button>
      <button onClick={() => reset()}>Reset</button>
      <button onClick={() => reset(25)}>Reset (25)</button>
    </div>
  );
};

`useList`

React 状态钩子，用于追踪数组型值。

用法

jsx 复制代码

import {useList} from 'react-use';

const Demo = () => {
  const [list, {set, push}] = useList();

  return (
    <div>
      <div>{list.join(',')}</div>
      <button onClick={() => set([])}>Reset</button>
      <button onClick={() => push(Date.now())}>Push</button>
    </div>
  );
};

`useMap`

React 状态钩子，用于追踪对象型值。

用法

jsx 复制代码

import {useMap} from 'react-use';

const Demo = () => {
  const [map, {set, reset}] = useMap({
    hello: 'there',
  });

  return (
    <div>
      <pre>{JSON.stringify(map, null, 2)}</pre>
      <button onClick={() => set(String(Date.now()), (new Date()).toJSON())}>Add</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  );
};

React Hook

传感器

用户界面

动画效果

副作用

生命周期

状态