1

我需要更新 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]);
4

2 回答 2

2

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

通常，对于回调，如果您在运行它们时提取值，则不需要更新它们。我并不是建议你总是默认这样做，但在某些情况下，如果你可以重新架构以拉动调用，它可以清理事情。

const someRef = useRef(null);

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

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

  // use latest values…
}, []);
于 2020-04-17T14:24:38.507 回答
0

正如 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]);
于 2020-04-21T08:21:04.277 回答