当在useEffect中使用记忆对象时，我们可以使用useMemo吗

Question

想象一下这种情况。

一个钩子接收一个对象并基于该对象的属性进行一些计算并返回结果。

export const useTestHook = (someOject) => {
const [updated, set] = useState({ val1: null, val2: null });
useEffect(() => {
set({
val1: `${someOject.val1}_-`,
val2: `${someOject.val2}_-`,
})
}, [someOject]);
return updated;
}

使用钩子的组件将这些值分开，因此需要初始化一个新对象，以便将其传递给钩子。然后通过一些回调将钩子的结果传递回父对象。

function TestComp({ onChange, parentValue }) {
const [value1, setValue1] = useState('value1');
const [value2, setValue2] = useState('value2');
// since mergedValues is used as dependency of the hook I need to 'memoize' it otherwise it gets 
// recreated on each re-render and will cycle 
const mergedValues = useMemo(() => ({
val1: value1,
val2: value2
}), [value1, value2]);
const updatedVals = useTestHook(mergedValues);
useEffect(() => {
onChange(updatedVals);
}, [onChange, updatedVals]);
return (
<div>
Hello
</div>
);
}

父级可以对该值进行其他计算，结果返回给子级。

function App() {
const [value, set] = useState('value1');
return (
<TestComp onChange={set} parentValue={value} />
);
}

当对象被用作某种效果的依赖项时，在react组件中处理对象创建的正确方法是什么？useMemo挂钩可以用于它吗？

const mergedValues = useMemo(() => ({
val1: value1,
val2: value2
}), [value1, value2]);

官方文件称；您可以将useMemo作为性能优化，而不是语义保证"https://reactjs.org/docs/hooks-reference.html#usememo

另一种方法是将钩子的道具从一个对象更改为简单的值，并在钩子的useEffect中根据这些值创建对象，但这种方法对我来说是行不通的

Answer 1

在react组件中处理对象创建的正确方法是什么当对象被用作某种效果的依赖项时？可以是使用备忘录挂钩？

是的，您可以使用useMemo，但有一点需要注意。既然医生这么说：

您可以将useMemo作为性能优化，而不是语义保证。在未来，React可能会选择"忘记"一些以前记忆的值，并在下一次中重新计算它们

这意味着在某些情况下，useMemo可能会忘记其存储的值，但仍会给您一个新对象，如果useEffect将该对象用作依赖项，则可能会触发该对象，而这可能不是您想要的。但是，如果你的useEffect是这样的，过环不是问题，那么这就不是问题。

您也可以这样做，并且不需要useMemo(假设val1和val2是基元(：

useEffect(() => {
set({
val1: `${someOject.val1}_-`,
val2: `${someOject.val2}_-`,
})
}, [someOject.val1, someOject.val2]);