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

我建议通过ref提取最新值，而不是更新回调。

通常，对于回调，如果在运行它们时提取值，则无需更新它们。我不建议您默认情况下始终执行此操作，但在某些情况下，如果可以重新构建以进行调用，则可以清除所有内容。

const someRef = useRef(null);

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

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

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

Answer 2

正如Rico Kahler在回答中的评论中指出的那样，对此有一个react docs示例，其结果更加清楚：

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挂钩

2 个答案: