hooks icon indicating copy to clipboard operation
hooks copied to clipboard

想同时具备 useSetState 合并对象、useResetState 重置状态的能力,有没有这样一个 hook?

Open linzhipeng98 opened this issue 2 years ago • 28 comments

linzhipeng98 avatar Jan 03 '24 02:01 linzhipeng98

个人理解:useSetState并没有提供reset这样类似的hook,但是可以变通解决

  const [state, setState] = useSetState({
    name: 'ice',
    age: 24,
  })

  const resetState = useCallback(() => {
    setState(() => state)
  }, [])

resetState本质利用的是闭包,保存初始值即可,这里setState需要用回调函数的方式,因为在其源码中,如果是函数的方式,则把prevState传递出来,返回值我们自己控制,不然传递非函数的形式,会进行合并,或者返回上一次的状态。

coding-ice avatar Jan 04 '24 01:01 coding-ice

@GetWebHB 其实就是我不想组合所以才问官方能不能提供 - -

linzhipeng98 avatar Jan 04 '24 07:01 linzhipeng98

如果要提供的话 我来pr好了

coding-ice avatar Jan 04 '24 08:01 coding-ice

如果要提供的话 我来pr好了

可以来个 PR,感谢。直接给 useSetState 的返回值添加第三个参数,像这样:cosnt [val, setVal, resetVal] = useSetState(),注意处理初始值是随机值时的重置问题,可以参考:https://github.com/alibaba/hooks/pull/2308/files

liuyib avatar Jan 08 '24 03:01 liuyib

第三个参数,改成一个对象,有利于第四个,第五个....参数的拓展。cosnt [val, setVal, { resetVal }] = useSetState()

Damon0820 avatar Jan 24 '24 02:01 Damon0820

感觉这个不太用纠结,状态其实也就那几个,反而个人觉得统一的风格更为重要,如果有后面在扩展即可

coding-ice avatar Jan 26 '24 01:01 coding-ice

能把 getState也加进去么

pangao66 avatar Feb 18 '24 02:02 pangao66

@pangao66 getState可以麻烦给一个使用场景吗,state可以直接访问

coding-ice avatar Feb 20 '24 01:02 coding-ice

@GetWebHB 就是 https://ahooks.js.org/zh-CN/hooks/use-get-state 把这个hook也合并进去, state默认拿的 不是最新的

pangao66 avatar Feb 20 '24 02:02 pangao66

@liuyib 元芳 你怎么看 有必要的话还是我来

coding-ice avatar Feb 20 '24 14:02 coding-ice

@pangao66 getState可以麻烦给一个使用场景吗,state可以直接访问

const [count, setCount, getCount] = useGetState(0)

const foo = () => {
  setCount(prev => prev + 1);
  // 这里需要用 getCount 才能获取到最新值,用 count 的话是旧值
  console.log(' -->', getCount(), count);
}

liuyib avatar Feb 26 '24 03:02 liuyib

感觉有必要统一 useSetState, useGetState, useResetState 这几个 hook。

之前我第一次看到这几个 hook 时,也想过为什么不直接把它们合并起来。但其实这几个 hook 用的少,没遇到同时需要这几个 hook 的场景,就没继续深入了。

目前我想的是这样统一:

// 类似于类组件的状态,扩展了 getState, resetState
const [state, setState, { getState, resetState }] = useSetState();
// 等价于 useState,扩展了 getState, resetState
const [state, setState, { getState, resetState }] = useGetState();

liuyib avatar Feb 26 '24 03:02 liuyib

但这样 useGetState 就 breaking changes 了(第三个返回值类型变了)估计要放在 v4 做了

liuyib avatar Feb 26 '24 03:02 liuyib

感觉有必要统一 useSetState, useGetState, useResetState 这几个 hook。

之前我第一次看到这几个 hook 时,也想过为什么不直接把它们合并起来。但其实这几个 hook 用的少,没遇到同时需要这几个 hook 的场景,就没继续深入了。

目前我想的是这样统一:

// 类似于类组件的状态,扩展了 getState, resetState
const [state, setState, { getState, resetState }] = useSetState();
// 等价于 useState,扩展了 getState, resetState
const [state, setState, { getState, resetState }] = useGetState();

@li-jia-nan @hchlq @miracles1919 @crazylxr 哥哥们,看下这样可以吗?

liuyib avatar Feb 26 '24 03:02 liuyib

但这样 useGetState 就 breaking changes 了(第三个返回值类型变了)估计要放在 v4 做了

可以换个名字 弄一个新的呢 比如useBetterState呢, 这样就不用breakingChange了, 也能把这几个hooks 融合在一起, 原来的那几个分开用也行

pangao66 avatar Feb 26 '24 06:02 pangao66

感觉有必要统一 useSetState, useGetState, useResetState 这几个 hook。 之前我第一次看到这几个 hook 时,也想过为什么不直接把它们合并起来。但其实这几个 hook 用的少,没遇到同时需要这几个 hook 的场景,就没继续深入了。 目前我想的是这样统一:

// 类似于类组件的状态,扩展了 getState, resetState
const [state, setState, { getState, resetState }] = useSetState();
// 等价于 useState,扩展了 getState, resetState
const [state, setState, { getState, resetState }] = useGetState();

@li-jia-nan @hchlq @miracles1919 @crazylxr 哥哥们,看下这样可以吗?

我觉得可以的哈,比较统一,可以在 v4 中做

hchlq avatar Feb 26 '24 09:02 hchlq

可以换个名字 弄一个新的呢 比如useBetterState呢

可以换个名字,来个新 hook。但是众所周知,起名字是计算机难题 :)

liuyib avatar Feb 26 '24 13:02 liuyib

这个 useGetState 换个什么名字好呢,来出出主意:

  1. useBetterState
  2. useSuperState
  3. useProState
  4. usePlusState
  5. useUltraState
  6. useMixState
  7. useGetResetState
  8. ......

👀 👀

liuyib avatar Feb 26 '24 13:02 liuyib

我甚至想把 useSetState 和 useGetState 也和成一个 hook const [state, setState, { getState, resetState, setObjectState }] = useProState();

setObjectState(这个名称可以换) 用于替代 useSetState

这样用户的心智就是反正用 state,都用 useProState,不用记那么多 hook

crazylxr avatar Feb 26 '24 14:02 crazylxr

然后就是那些 useEffect 也有很多可以合并的,很多 hook 绝大部分情况下用不到,比如那些 deep,我希望的尽量少的 hook,hook 的功能强大一点,使用者心智会简单一点

crazylxr avatar Feb 26 '24 14:02 crazylxr

这个 useGetState 换个什么名字好呢,来出出主意:

  1. useBetterState
  2. useSuperState
  3. useProState
  4. usePlusState
  5. useUltraState
  6. useMixState
  7. useGetResetState
  8. ......

👀 👀

useSmartState 或者 useBetterState 不错 @liuyib

linzhipeng98 avatar Feb 27 '24 08:02 linzhipeng98

我甚至想把 useSetState 和 useGetState 也和成一个 hook const [state, setState, { getState, resetState, setObjectState }] = useProState();

我也感觉这俩合成一个挺不错的,但是下面这种情况是不是反而麻烦了点:

const [state, setState] = useSetState();

// 等价于上面的代码,但是第二项用不到
const [state, _, { setObjectState: setState }] = useProState();

liuyib avatar Feb 27 '24 09:02 liuyib

我甚至想把 useSetState 和 useGetState 也和成一个 hook const [state, setState, { getState, resetState, setObjectState }] = useProState();

我也感觉这俩合成一个挺不错的,但是下面这种情况是不是反而麻烦了点:

const [state, setState] = useSetState();

// 等价于上面的代码,但是第二项用不到
const [state, _, { setObjectState: setState }] = useProState();

那感觉可以把 setState 放到第二项里,第二项里全部是方法

crazylxr avatar Mar 08 '24 03:03 crazylxr

我从vue转过来的,原生react那几个api不好用,看了下ahooks确实眼前一亮,看到state也想为什么不合并,set和 get还有reset,不管怎么说ahooks在react生态中我认为是最好的hooks三方库

MaybeQHL avatar Mar 22 '24 02:03 MaybeQHL

ok, 交给我吧~, 另外useSetStateuseGetState打算移除吗 如果不打算移除,我直接import进来了

const [state, { setState, getState, resetState, setObjectState }] = useProState();

coding-ice avatar Mar 24 '24 07:03 coding-ice

ok, 交给我吧~, 另外useSetStateuseGetState打算移除吗 如果不打算移除,我直接import进来了

const [state, { setState, getState, resetState, setObjectState }] = useProState();

重新写一个吧。后面肯定会移除的的。

crazylxr avatar Mar 28 '24 01:03 crazylxr