告诉 react hook 一个"nested"对象已经更新，而不复制整个对象？

Question

在我的状态下，我使用一个集合来跟踪选择。该集合可以增长到相当大的大小，因此我希望防止不断复制该集合。

我正在使用一个钩子作为状态，如下所示，代码正在工作。但是，与其返回新集，我更喜欢返回"旧集"，就地更新集。

但是，当我这样做时，react 没有注意到更改，并且不会发生重绘事件和其他效果。

const [selected, setSelected] = React.useState<Set<number>>(new Set());
function onSelect(ev: SyntheticEvent<>, checked: boolean, event_id: number) {
setSelected((selected) => {
if (checked) {
if (!selected.has(event_id)) {
selected.add(event_id);
}
} else {
if (selected.has(event_id)) {
selected.delete(event_id);
}
}
return new Set(selected);
})
}

我如何告诉反应"嘿，我已经更新了 xyz 状态变量"？

Answer 1

你可以这样使用useCallback

const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);

从文档中：useCallback 将返回回调的记忆版本，该版本仅在其中一个依赖项发生更改时才更改。当将回调传递给依赖于引用相等以防止不必要的渲染的优化子组件时，这很有用(例如shouldComponentUpdate(。

虽然你可以这样使用useRef

function useEffectOnce(cb) {
const didRun = useRef(false);
useEffect(() => {
if(!didRun.current) {
cb();
didRun.current = true
}
})
}

对象引用不会通知 React 有关当前引用值的更改。