React useState的钩子InitialState拆分和传播

编程问答 2022-06-08

问题描述

我构建了一个自定义钩子，该钩子接受一个initialState参数，并使用三个useState钩子在内部存储它。对于对象值，这很好用，但是对于使用函数的延迟初始化值，这似乎有些棘手。

简单版本：

const useMyHook = (initialState) => {
  const [foo,setFoo] = useState(initialState.foo);
  const [bar,setBar] = useState(initialState.bar);
  const [baz,setBaz] = useState(initialState.baz);
}

// usage
useMyHook({
  foo: 1,bar: 2,baz: 3
});

但是因为有时我需要进行一些昂贵的计算，所以在这些情况下，我想使用函数而不是普通值：

useMyHook(() => ({
  foo: some(),bar: expensive(),baz: computations()
}));

但是现在我必须编写一些复杂的代码来拆分和传播initialState的结果。

const useMyHook = (initialState) => {
  const [foo,setFoo] = useState(typeof initialState === 'function' ? () => initialState().foo : initialState.foo);
  const [bar,setBar] = useState(typeof initialState === 'function' ? () => initialState().bar : initialState.bar);
  const [baz,setBaz] = useState(typeof initialState === 'function' ? () => initialState().baz : initialState.baz);
}

我什至不确定这是否能奏效。但是即使这样做，它仍然会在第一次渲染时执行initialState函数三遍，这并不好。当然，代码看起来很难看。

尽管我正在寻找以下解决方案：

  • 只有一个initialState参数
  • 内部使用三个独立状态
  • 同时支持快速初始化和延迟初始化
  • 只执行一次懒惰功能

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lazy-initializationreact-hooksreactjsreactjsuse-state