告诉反应挂钩“嵌套”对象已更新，而不复制整个对象？

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
        }
    })
}

object ref 不会通知 react 对当前 ref 值的更改。