Reactjs React钩子初始状态拆分和useState的传播

我构建了一个自定义钩子，它接受一个

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

  参数
• 在内部使用三个独立的国家
• 支持即时和延迟初始化
• 只执行一次惰性函数