Как обновить ловушку useCallback на событие - PullRequest
Новая
       80

Как обновить ловушку useCallback на событие

0 голосов
/ 17 апреля 2020

Мне нужно обновить ловушку useCallback для определенного события, которое генерируется eventEmitter3. Прямо сейчас я обновляю локальное состояние с текущим временем, чтобы вызвать 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]);

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Я бы предложил вытягивать самые последние значения через ссылку вместо обновления обратного вызова.

В целом, для обратных вызовов вам не нужно обновлять их, если вы извлекаете значения во время их запуска , Я не предлагаю, чтобы вы всегда делали это по умолчанию, но в некоторых случаях это может привести в порядок, если вы перестроите архитектуру, чтобы вызвать вызов, если можете. 

const someRef = useRef(null);

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

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

  // use latest values…
}, []);
0 голосов
/ 21 апреля 2020

Как Рико Калер указал в комментариях в своем ответе, есть пример реагирования на это, который приводит к гораздо более ясному: 

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]);
...