如何在事件上更新useCallback挂钩

2024-06-04 • 问答

我需要在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]);

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

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

const someRef = useRef(null);

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

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

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

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

liangpenghui 回答：如何在事件上更新useCallback挂钩

大家都在问