React useState的钩子InitialState拆分和传播

如何解决React useState的钩子InitialState拆分和传播

我构建了一个自定义钩子，该钩子接受一个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参数
• 内部使用三个独立状态
• 同时支持快速初始化和延迟初始化
• 只执行一次懒惰功能