React Hooks useEffect üzerindeki eski ve yeni Değerler nasıl karşılaştırılır?

Diyelim ki 3 girişim var: rate, sendAmount ve receAmount. Bu 3 girişi useEffect difing params üzerine koydum. Kurallar:

• SendAmount değiştiyse, hesaplıyorum receiveAmount = sendAmount * rate
• ReceAmount değiştiyse, hesaplıyorum sendAmount = receiveAmount / rate
• Oran değiştiğinde receiveAmount = sendAmount * ratene zaman hesaplıyorum sendAmount > 0ya da sendAmount = receiveAmount / ratene zaman hesaplıyorumreceiveAmount > 0

Sorunu göstermek için kod ve https://codesandbox.io/s/pkl6vn7x6j kodları .

Bu durumda 3 işleyici yapmak yerine oldValuesve newValuesbenzerlerini karşılaştırmanın bir yolu var mı componentDidUpdate?

Teşekkürler

İşte https://codesandbox.io/s/30n01w2r06 ile son çözümümusePrevious

Bu durumda, useEffecther değişiklik aynı ağ çağrısına yol açtığı için çoklu kullanamıyorum . Bu yüzden changeCountdeğişikliği izlemek için de kullanıyorum . Bu changeCountaynı zamanda yalnızca yerel değişikliklerin izlenmesine yardımcı olur, böylece sunucudaki değişiklikler nedeniyle gereksiz ağ çağrısını önleyebilirim.

UseRef kullanarak önceki bir sahne sağlamak için özel bir kanca yazabilirsiniz

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

ve sonra içinde kullan 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])
}

Bununla birlikte, useEffectayrı olarak işlemek istediğiniz her değişiklik kimliği için iki ayrı ayrı kullanılıp kullanılmadığını okumak ve anlamak daha açık ve muhtemelen daha iyi ve daha açıktır.

Herkesin bir TypeScript kullanım sürümü araması durumunda

import { useEffect, useRef } from "react";

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

Seçenek 1 - KullanımKanca Kancası

Geçerli bir değeri önceki bir değerle karşılaştırmak yaygın bir kalıptır ve uygulama ayrıntılarını gizleyen kendi özel kancasını haklı çıkarır.

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

gösteri

Seçenek 2 - Değer değiştiğinde useEffect'i çalıştırın

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

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

gösteri

Az önce bu tür bir senaryoyu çözen tepki-delta yayınladım . Bence,useEffect çok fazla sorumluluğu var.

Sorumluluklar

1. Bağımlılık dizisindeki tüm değerleri kullanarak karşılaştırır. Object.is
2. # 1 sonucuna göre efekt / temizleme geri çağrıları çalıştırır

Sorumlulukların Ayrılması

react-deltasonları useEffectbirkaç küçük kanca içine 'ın sorumlulukları.

Sorumluluk # 1

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

Sorumluluk # 2

• useConditionalEffect(callback, boolean)

Deneyimlerime göre, bu yaklaşım useEffect/ useRefçözümlerden daha esnek, temiz ve özlüdür .

Durum, fonksiyonel bileşenlerde bileşen örneği ile sıkı bir şekilde eşleşmediğinden, önce duruma useEffectkaydetmeden önceki duruma erişilemez useRef. Bu aynı zamanda durum güncellemesinin yanlış yerde yanlış bir şekilde uygulandığı anlamına gelir, çünkü önceki durum içeride kullanılabilirsetState güncelleyici işlevi .

Bu, useReducer Redux benzeri bir mağaza sağlayan ve ilgili kalıbın uygulanmasına izin veren . Durum güncellemeleri açıkça gerçekleştirilir, bu nedenle hangi durum özelliğinin güncellendiğini anlamaya gerek yoktur; bu zaten gönderilen işlemden açıktır.

İşte neye benzeyebileceğine dair bir örnek :

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

Ref kullanmak, uygulamaya yeni bir tür hata tanıtacaktır.

usePreviousBirinin daha önce yorumladığı bu davayı görelim :

1. prop.minTime: 5 ==> ref.current = 5 | ref. akım ayarı
2. prop.minTime: 5 ==> ref.current = 5 | yeni değer ref.current değerine eşittir
3. prop.minTime: 8 ==> ref.current = 5 | yeni değer ref. akım değerine eşit DEĞİLDİR
4. prop.minTime: 5 ==> ref.current = 5 | yeni değer ref.current değerine eşittir

Burada gördüğümüz gibi, biz iç güncellenmiyor refkullandığımız çünküuseEffect

Gerçekten basit prop karşılaştırması için, bir propin güncellenip güncellenmediğini kolayca kontrol etmek için useEffect'i kullanabilirsiniz.

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

}

useEffect kodunuzu yalnızca pervane değişirse çalıştırır.

Özel bir kanca gerektirmeyen alternatif bir çözüm olan kabul edilen cevabın kapatılması:

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

İşte kullandığımdan daha sezgisel olduğuna inandığım özel bir kanca 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)
}

useTransitionAşağıdaki gibi kullanırsınız .

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

Umarım yardımcı olur.