Wie vergleiche ich alte und neue Werte auf React Hooks useEffect?

Angenommen, ich habe drei Eingaben: rate, sendAmount und receiveAmount. Ich habe diese 3 Eingänge auf useEffect diffing params gesetzt. Die Regeln sind:

• Wenn sendAmount geändert wurde, berechne ich receiveAmount = sendAmount * rate
• Wenn receiveAmount geändert wurde, berechne ich sendAmount = receiveAmount / rate
• Wenn sich die Rate ändert, berechne ich receiveAmount = sendAmount * ratewann sendAmount > 0oder sendAmount = receiveAmount / ratewannreceiveAmount > 0

Hier ist die Codesandbox https://codesandbox.io/s/pkl6vn7x6j , um das Problem zu demonstrieren.

Gibt es eine Möglichkeit, das oldValuesund newValuesdergleichen zu vergleichen, componentDidUpdateanstatt 3 Handler für diesen Fall zu erstellen?

Vielen Dank

Hier ist meine endgültige Lösung mit usePrevious https://codesandbox.io/s/30n01w2r06

In diesem Fall kann ich nicht mehrere verwenden, useEffectda jede Änderung zu demselben Netzwerkanruf führt. Deshalb changeCountverfolge ich die Änderung auch. Dies ist changeCountauch hilfreich, um Änderungen nur von lokal zu verfolgen, damit ich unnötige Netzwerkanrufe aufgrund von Änderungen vom Server verhindern kann.

Mit useRef können Sie einen benutzerdefinierten Hook schreiben, um frühere Requisiten bereitzustellen

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

und dann verwenden Sie es in 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])
}

Es ist jedoch klarer und wahrscheinlich besser und klarer zu lesen und zu verstehen, wenn Sie zwei useEffectseparat für jede Änderungs-ID verwenden, die Sie separat verarbeiten möchten

Falls jemand nach einer TypeScript-Version von usePrevious sucht:

import { useEffect, useRef } from "react";

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

Option 1 - useCompare-Hook

Das Vergleichen eines aktuellen Werts mit einem vorherigen Wert ist ein gängiges Muster und rechtfertigt einen eigenen benutzerdefinierten Hook, der Implementierungsdetails verbirgt.

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>;
};

Demo

Option 2 - Verwenden Sie useEffect, wenn sich der Wert ändert

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

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

Demo

Ich habe gerade React-Delta veröffentlicht , das genau diese Art von Szenario löst. Meiner Meinung nach,useEffect hat zu viele Verantwortlichkeiten.

Verantwortlichkeiten

1. Es vergleicht alle Werte in seinem Abhängigkeitsarray mit Object.is
2. Es werden Effekt- / Bereinigungsrückrufe basierend auf dem Ergebnis von # 1 ausgeführt

Verantwortlichkeiten auflösen

react-deltabricht useEffectdie Verantwortung in mehrere kleinere Haken.

Verantwortung # 1

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

Verantwortung # 2

• useConditionalEffect(callback, boolean)

Nach meiner Erfahrung ist dieser Ansatz flexibler, sauberer und prägnanter als useEffect/ useRefLösungen.

Da der Status in Funktionskomponenten nicht eng mit der Komponenteninstanz gekoppelt ist, kann der vorherige Status nicht erreicht werden, useEffectohne ihn zuerst zu speichern, z. B. mit useRef. Dies bedeutet auch, dass die Statusaktualisierung möglicherweise falsch an einer falschen Stelle implementiert wurde, da der vorherige Status darin verfügbar istsetState Statusaktualisierung Updater-Funktion .

Dies ist ein guter Anwendungsfall für useReducer den ein Redux-ähnlicher Speicher bereitgestellt wird und der die Implementierung eines entsprechenden Musters ermöglicht. Statusaktualisierungen werden explizit durchgeführt, sodass nicht herausgefunden werden muss, welche Statuseigenschaft aktualisiert wird. Dies geht bereits aus der versendeten Aktion hervor.

Hier ist ein Beispiel, wie es aussehen könnte:

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

Die Verwendung von Ref führt zu einer neuen Art von Fehler in der App.

Sehen wir uns diesen Fall mit usePreviousdem zuvor kommentierten an:

1. prop.minTime: 5 ==> ref.current = 5 | setze ref.current
2. prop.minTime: 5 ==> ref.current = 5 | neuer Wert ist gleich ref.current
3. prop.minTime: 8 ==> ref.current = 5 | neuer Wert ist NICHT gleich ref.current
4. prop.minTime: 5 ==> ref.current = 5 | neuer Wert ist gleich ref.current

Wie wir hier sehen können, aktualisieren refwir das interne nicht, weil wir es verwendenuseEffect

Für einen wirklich einfachen Vergleich der Requisiten können Sie mit useEffect leicht überprüfen, ob eine Requisite aktualisiert wurde.

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

}

useEffect führt Ihren Code dann nur aus, wenn sich die Requisite ändert.

Die akzeptierte Antwort ist eine alternative Lösung, für die kein benutzerdefinierter Hook erforderlich ist:

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

Hier ist ein benutzerdefinierter Hook, den ich verwende und der meiner Meinung nach intuitiver ist als die Verwendung 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)
}

Sie würden useTransitionwie folgt verwenden.

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

Hoffentlich hilft das.