如何更新事件的 useCallback 挂钩答案

【问题标题】：How to update a useCallback hook on a event如何更新事件的 useCallback 挂钩
【发布时间】：2020-04-17 14:19:20
【问题描述】：

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

【问题讨论】：

我觉得不错

标签： reactjs react-hooks usecallback

【解决方案1】：

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

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

const someRef = useRef(null);

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

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

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

【讨论】：

我主要关心的是setReferencesDidChange(new Date().getTime()); 你的回答如何避免这种情况？
令我困惑的是为什么您需要根据此事件重新创建 renderLeaf 回调。对我来说，似乎您需要做的就是强制重新渲染。如果您需要一个事件来强制重新渲染（因为例如从非反应状态读取），那么做类似setReferencesDidChange(new Date().getTime()) 的事情就可以了。 The react docs have an example of this pattern.
如果您有更多愿意分享的代码，我可以给您更好的答案，否则，您所做的可能没问题！

【解决方案2】：

正如 Rico Kahler 在他的回答中在 cmets 中指出的那样，有一个关于此的 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]);

【讨论】：