useGetSet

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

用法

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

  1. import {useGetSet} from 'react-use';
  3. const Demo = () => {
  4.   const [get, set] = useGetSet(0);
  5.   const onClick = () => {
  6.     setTimeout(() => {
  7.       set(get() + 1)
  8.     }, 1_000);
  9.   };
  11.   return (
  12.     <button onClick={onClick}>Clicked: {get()}</button>
  13.   );
  14. };

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

  1. const DemoWrong = () => {
  2.   const [cnt, set] = useState(0);
  3.   const onClick = () => {
  4.     setTimeout(() => {
  5.       set(cnt + 1)
  6.     }, 1_000);
  7.   };
  9.   return (
  10.     <button onClick={onClick}>Clicked: {cnt}</button>
  11.   );
  12. };