Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
linzhipeng98 opened this issue Jan 3, 2024 · 26 comments
Labels
feature New feature or request v4

Comments

@linzhipeng98
Copy link

No description provided.

@GetWebHB
Copy link
Contributor

GetWebHB commented Jan 4, 2024

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

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

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

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

@linzhipeng98
Copy link
Author

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

@GetWebHB
Copy link
Contributor

GetWebHB commented Jan 4, 2024

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

@liuyib
Copy link
Collaborator

liuyib commented Jan 8, 2024

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

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

@Damon0820
Copy link

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

@GetWebHB
Copy link
Contributor

GetWebHB commented Jan 26, 2024

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

@pangao66
Copy link

能把 getState也加进去么

@GetWebHB
Copy link
Contributor

GetWebHB commented Feb 20, 2024

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

@pangao66
Copy link

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

@GetWebHB
Copy link
Contributor

GetWebHB commented Feb 20, 2024

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

@liuyib
Copy link
Collaborator

liuyib commented Feb 26, 2024

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

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

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

@liuyib
Copy link
Collaborator

liuyib commented Feb 26, 2024

感觉有必要统一 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
Copy link
Collaborator

liuyib commented Feb 26, 2024

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

@liuyib
Copy link
Collaborator

liuyib commented Feb 26, 2024

感觉有必要统一 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 哥哥们,看下这样可以吗?

@pangao66
Copy link

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

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

@hchlq
Copy link
Collaborator

hchlq commented Feb 26, 2024

感觉有必要统一 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 中做

@liuyib
Copy link
Collaborator

liuyib commented Feb 26, 2024

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

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

@liuyib
Copy link
Collaborator

liuyib commented Feb 26, 2024

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

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

👀 👀

@crazylxr
Copy link
Collaborator

crazylxr commented Feb 26, 2024

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

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

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

@crazylxr
Copy link
Collaborator

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

@linzhipeng98
Copy link
Author

linzhipeng98 commented Feb 27, 2024

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

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

👀 👀

useSmartState 或者 useBetterState 不错 @liuyib

@liuyib liuyib added the feature New feature or request label Feb 27, 2024
@liuyib
Copy link
Collaborator

liuyib commented Feb 27, 2024

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

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

const [state, setState] = useSetState();

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

@crazylxr
Copy link
Collaborator

crazylxr commented Mar 8, 2024

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

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

const [state, setState] = useSetState();

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

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

@crazylxr crazylxr added the v4 label Mar 8, 2024
@MaybeQHL
Copy link

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

@GetWebHB
Copy link
Contributor

GetWebHB commented Mar 24, 2024

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

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

@crazylxr
Copy link
Collaborator

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request v4
Projects
None yet
Development

No branches or pull requests

8 participants