如何更新事件的 useCallback 掛鈎

Question

我需要更新 eventEmitter3 發出的某個事件的 useCallback 掛鈎。 現在我用當前時間更新本地 state 以觸發 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]);