如何更新事件上的 useCallback 挂钩

Question

我需要更新 eventEmitter3 发出的特定事件的 useCallback 挂钩。现在我用当前时间更新本地状态以触发 useCallback。这行得通，但看起来非常复杂。有更好的解决方案吗？

const [referencesDidChange, setReferencesDidChange] = useState(0);

useEffect(() => {
    const referencesChange = () => {
        setReferencesDidChange(new Date().getTime());
    };
    eventEmitter.on(Events.ReferencesChange, referencesChange);
    return () => {
        eventEmitter.removeListener(Events.ReferencesChange, referencesChange);
    };
}, []);

const renderLeaf = useCallback(props => <Leaf {...props} />, [referencesDidChange]);

Answer 1

我建议通过引用而不是更新回调来提取最新的值。

通常，使用回调，如果您在运行时提取值，则不需要更新它们。我并不是建议您总是默认执行此操作，但在某些情况下，如果您可以重新架构以调用调用，它可以清理一些东西。

const someRef = useRef(null);

useEffect(() => {
  someRef.current = someChangingValue;
}, [someChangingValue]);

const renderLeaf = useCallback(() => {
  const latestValues = someRef.current;

  // use latest values…
}, []);

Answer 2

正如 Rico Kahler 在他的回答中的评论中指出的那样，有一个关于此的 React 文档示例，结果更加清晰：

const [referencesDidChange, setReferencesDidChange] = useReducer(x => x + 1, 0);

useEffect(() => {
    eventEmitter.on(Events.ReferencesChange, setReferencesDidChange);
    return () => {
        eventEmitter.removeListener(Events.ReferencesChange, setReferencesDidChange);
    };
}, []);

const renderLeaf = useCallback(props => <Leaf {...props} />, [referencesDidChange]);

如何更新事件上的 useCallback 挂钩

How to update a useCallback hook on a event

reactjs

react-hooks

usecallback