Jak porównać stare i nowe wartości w React hookach useEffect?

Powiedzmy, że mam 3 wejścia: rate, sendAmount i acceptAmount. Umieściłem te 3 wejścia na różnicowych parametrach useEffect. Zasady są następujące:

• Jeśli wartość sendAmount uległa zmianie, obliczam receiveAmount = sendAmount * rate
• Jeśli wartość otrzymanej kwoty uległa zmianie, obliczam sendAmount = receiveAmount / rate
• Jeśli kurs się zmienił, obliczam receiveAmount = sendAmount * ratekiedy sendAmount > 0lub obliczam sendAmount = receiveAmount / ratekiedyreceiveAmount > 0

Oto kodyandbox https://codesandbox.io/s/pkl6vn7x6j, aby zademonstrować problem.

Czy istnieje sposób na porównanie oldValuesi newValuespolubienie componentDidUpdatezamiast tworzenia 3 programów obsługi dla tego przypadku?

Dzięki

Oto moje ostateczne rozwiązanie z usePrevious https://codesandbox.io/s/30n01w2r06

W tym przypadku nie mogę użyć wielu, useEffectponieważ każda zmiana prowadzi do tego samego połączenia sieciowego. Dlatego też używam changeCountdo śledzenia zmian. Jest to changeCountrównież pomocne w śledzeniu zmian tylko z lokalnego, więc mogę zapobiec niepotrzebnym połączeniom sieciowym z powodu zmian z serwera.

Możesz napisać niestandardowy punkt zaczepienia, który zapewni ci poprzednie właściwości za pomocą useRef

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

a następnie użyj go w useEffect

const Component = (props) => {
    const {receiveAmount, sendAmount } = props
    const prevAmount = usePrevious({receiveAmount, sendAmount});
    useEffect(() => {
        if(prevAmount.receiveAmount !== receiveAmount) {

         // process here
        }
        if(prevAmount.sendAmount !== sendAmount) {

         // process here
        }
    }, [receiveAmount, sendAmount])
}

Jednak jest to jaśniejsze i prawdopodobnie lepsze i bardziej przejrzyste do odczytania i zrozumienia, jeśli używasz dwóch useEffectosobno dla każdego identyfikatora zmiany, który chcesz przetwarzać osobno

O ile ktoś szuka wersji do wykorzystania w języku TypeScript

import { useEffect, useRef } from "react";

const usePrevious = <T extends {}>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

Opcja 1 - useCompare hook

Porównanie bieżącej wartości z poprzednią wartością jest powszechnym wzorcem i uzasadnia własny niestandardowy punkt zaczepienia, który ukrywa szczegóły implementacji.

const useCompare = (val: any) => {
    const prevVal = usePrevious(val)
    return prevVal !== val
}

const usePrevious = (value) => {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
}

const Component = (props) => {
  ...
  const hasVal1Changed = useCompare(val1)
  const hasVal2Changed = useCompare(val2);
  useEffect(() => {
    if (hasVal1Changed ) {
      console.log("val1 has changed");
    }
    if (hasVal2Changed ) {
      console.log("val2 has changed");
    }
  });

  return <div>...</div>;
};

Próbny

Opcja 2 - uruchom useEffect po zmianie wartości

const Component = (props) => {
  ...
  useEffect(() => {
    console.log("val1 has changed");
  }, [val1]);
  useEffect(() => {
    console.log("val2 has changed");
  }, [val2]);

  return <div>...</div>;
};

Próbny

Właśnie opublikowałem odpowiedź -delta, która rozwiązuje dokładnie tego rodzaju scenariusz. Moim zdaniem useEffectma zbyt wiele obowiązków.

Obowiązki

1. Porównuje wszystkie wartości w swojej tablicy zależności przy użyciu Object.is
2. Uruchamia wywołania zwrotne efektów / czyszczenia w oparciu o wynik # 1

Zerwanie odpowiedzialności

react-deltadzieli useEffectobowiązki na kilka mniejszych haczyków.

Odpowiedzialność nr 1

• usePrevious(value)
• useLatest(value)
• useDelta(value, options)
• useDeltaArray(valueArray, options)
• useDeltaObject(valueObject, options)
• some(deltaArray)
• every(deltaArray)

Odpowiedzialność nr 2

• useConditionalEffect(callback, boolean)

Z mojego doświadczenia wynika, że ​​to podejście jest bardziej elastyczne, przejrzyste i zwięzłe niż useEffect/ useRefrozwiązania.

Ponieważ stan nie jest ściśle powiązany z instancją komponentu w komponentach funkcjonalnych, nie można osiągnąć poprzedniego stanu useEffectbez wcześniejszego zapisania go, na przykład za pomocą useRef. Oznacza to również, że aktualizacja stanu została prawdopodobnie nieprawidłowo zaimplementowana w niewłaściwym miejscu, ponieważ poprzedni stan jest dostępny w setStatefunkcji aktualizatora.

Jest to dobry przypadek użycia, useReducerktóry zapewnia sklep podobny do Redux i pozwala na implementację odpowiedniego wzorca. Aktualizacje stanu są wykonywane jawnie, więc nie ma potrzeby sprawdzania, która właściwość stanu jest aktualizowana; widać to już po wysłanej akcji.

Oto przykład, jak to może wyglądać:

function reducer({ sendAmount, receiveAmount, rate }, action) {
  switch (action.type) {
    case "sendAmount":
      sendAmount = action.payload;
      return {
        sendAmount,
        receiveAmount: sendAmount * rate,
        rate
      };
    case "receiveAmount":
      receiveAmount = action.payload;
      return {
        sendAmount: receiveAmount / rate,
        receiveAmount,
        rate
      };
    case "rate":
      rate = action.payload;
      return {
        sendAmount: receiveAmount ? receiveAmount / rate : sendAmount,
        receiveAmount: sendAmount ? sendAmount * rate : receiveAmount,
        rate
      };
    default:
      throw new Error();
  }
}

function handleChange(e) {
  const { name, value } = e.target;
  dispatch({
    type: name,
    payload: value
  });
}

...
const [state, dispatch] = useReducer(reducer, {
  rate: 2,
  sendAmount: 0,
  receiveAmount: 0
});
...

Użycie Ref wprowadzi do aplikacji nowy rodzaj błędu.

Zobaczmy ten przypadek, korzystając z usePreviouswcześniejszego komentarza:

1. prop.minTime: 5 ==> ref.current = 5 | ustaw ref. prąd
2. prop.minTime: 5 ==> ref.current = 5 | nowa wartość jest równa ref.current
3. prop.minTime: 8 ==> ref.current = 5 | nowa wartość NIE jest równa ref.current
4. prop.minTime: 5 ==> ref.current = 5 | nowa wartość jest równa ref.current

Jak widać tutaj, nie aktualizujemy wewnętrznego, refponieważ używamyuseEffect

Dla naprawdę prostego porównania rekwizytów możesz użyć useEffect, aby łatwo sprawdzić, czy właściwość została zaktualizowana.

const myComponent = ({ prop }) => {
  useEffect(() => {
     ---Do stuffhere----
    }
  }, [prop])

}

useEffect uruchomi wtedy Twój kod tylko wtedy, gdy właściwość ulegnie zmianie.

Wychodząc od zaakceptowanej odpowiedzi, alternatywne rozwiązanie, które nie wymaga niestandardowego zaczepu:

const Component = (props) => {
  const { receiveAmount, sendAmount } = props;
  const prevAmount = useRef({ receiveAmount, sendAmount }).current;
  useEffect(() => {
    if (prevAmount.receiveAmount !== receiveAmount) {
     // process here
    }
    if (prevAmount.sendAmount !== sendAmount) {
     // process here
    }
    return () => { 
      prevAmount.receiveAmount = receiveAmount;
      prevAmount.sendAmount = sendAmount;
    };
  }, [receiveAmount, sendAmount]);
};

Oto niestandardowy hak, którego używam, a który moim zdaniem jest bardziej intuicyjny niż używanie usePrevious.

import { useRef, useEffect } from 'react'

// useTransition :: Array a => (a -> Void, a) -> Void
//                              |_______|  |
//                                  |      |
//                              callback  deps
//
// The useTransition hook is similar to the useEffect hook. It requires
// a callback function and an array of dependencies. Unlike the useEffect
// hook, the callback function is only called when the dependencies change.
// Hence, it's not called when the component mounts because there is no change
// in the dependencies. The callback function is supplied the previous array of
// dependencies which it can use to perform transition-based effects.
const useTransition = (callback, deps) => {
  const func = useRef(null)

  useEffect(() => {
    func.current = callback
  }, [callback])

  const args = useRef(null)

  useEffect(() => {
    if (args.current !== null) func.current(...args.current)
    args.current = deps
  }, deps)
}

Używałbyś useTransitionw następujący sposób.

useTransition((prevRate, prevSendAmount, prevReceiveAmount) => {
  if (sendAmount !== prevSendAmount || rate !== prevRate && sendAmount > 0) {
    const newReceiveAmount = sendAmount * rate
    // do something
  } else {
    const newSendAmount = receiveAmount / rate
    // do something
  }
}, [rate, sendAmount, receiveAmount])

Mam nadzieję, że to pomoże.