从useStates而不是store派生状态

Question

下午好的互联网人。

我正在构建一个独立的小react组件。也就是说，不是带有redux商店的大型应用程序的一部分。

我使用几个useState来保存一些状态，我想从这些状态中导出一些额外的数据。

export function useNeatoThing() {
const [datasetA, setDtasetA] = useState();
const [datasetB, setDtasetB] = useState();
fetch("apiA") ~~ pseudocode ~~> setDtasetA(data)
fetch("apiB") ~~ pseudocode ~~> setDtasetB(data)
const [myDerivedThing, setMyDerivedThing] = useState<number | undefined >()

return {myDerivedThing, data: {datasetA, datasetB}}
}

我想知道最好的图案是什么。

我非常希望避免使用useEffect来进行推导。这感觉很笨重：

useEffect(() => {
if (datasetA && datasetB) {
setMyDerivedThing(datasetA.alpha * datasetB.gamma)
}    
}, [datasetA, datasetB] )

我是什么都不强调，还是有更好的方法？

Answer 1

您不应该使用useEffect来设置派生状态。你不应该有一个从状态或道具派生出来的状态。只需在渲染时计算即可。如果这是一个昂贵的计算，请使用useMemo来存储操作。所以你的代码应该是

export function useNeatoThing() {
const [datasetA, setDatasetA] = useState();
const [datasetB, setDatasetB] = useState();
fetch("apiA")~~~~> setDtasetA(data)
fetch("apiB")~~~~> setDtasetB(data)
const derivedThing = useMemo(() => {
if (datasetA && datasetB) 
return datasetA.alpha * datasetB.gamma;
}, 
[datasetA, datasetB])

return {state, available, myDerivedThing, data: {datasetA, datasetB}}
}

使用useEffect使它变得比必要的更复杂。它的效率也很低：它使用派生值的陈旧值执行整个渲染过程，然后立即使用更新的值重新渲染。

通常，当你可以从状态或道具中派生出一些东西时，你不应该把它放在一个状态中。