Bagaimana cara membandingkan oldValues ​​dan newValues ​​di React Hooks useEffect?

Katakanlah saya memiliki 3 input: rate, sendAmount, dan acceptAmount. Saya menempatkan 3 masukan itu pada parameter diffing useEffect. Aturannya adalah:

• Jika sendAmount berubah, saya menghitung receiveAmount = sendAmount * rate
• Jika acceptAmount berubah, saya menghitung sendAmount = receiveAmount / rate
• Jika tarif berubah, saya menghitung receiveAmount = sendAmount * ratekapan sendAmount > 0atau saya menghitung sendAmount = receiveAmount / ratekapanreceiveAmount > 0

Berikut adalah codesandbox https://codesandbox.io/s/pkl6vn7x6j untuk mendemonstrasikan masalahnya.

Adakah cara untuk membandingkan oldValuesdan newValuessuka componentDidUpdatedaripada membuat 3 penangan untuk kasus ini?

Terima kasih

Inilah solusi terakhir saya dengan usePrevious https://codesandbox.io/s/30n01w2r06

Dalam kasus ini, saya tidak dapat menggunakan beberapa useEffectkarena setiap perubahan mengarah ke panggilan jaringan yang sama. Itu sebabnya saya juga biasa changeCountmelacak perubahannya. Ini changeCountjuga membantu untuk melacak perubahan dari hanya lokal, jadi saya dapat mencegah panggilan jaringan yang tidak perlu karena perubahan dari server.

Anda dapat menulis hook kustom untuk memberi Anda props sebelumnya menggunakan useRef

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

lalu gunakan di 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])
}

Namun lebih jelas dan mungkin lebih baik dan lebih jelas untuk membaca dan memahami jika Anda menggunakan dua useEffectsecara terpisah untuk setiap id perubahan, Anda ingin memprosesnya secara terpisah

Jika ada yang mencari versi TypeScript dari usePrevious:

Dalam .tsxmodul:

import { useEffect, useRef } from "react";

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

Atau dalam .tsmodul:

import { useEffect, useRef } from "react";

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

Opsi 1 - jalankan useEffect saat nilai berubah

const Component = (props) => {

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

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

Demo

Opsi 2 - hook useHasChanged

Membandingkan nilai saat ini dengan nilai sebelumnya adalah pola umum, dan membenarkan kaitan khusus miliknya yang menyembunyikan detail implementasi.

const Component = (props) => {
  const hasVal1Changed = useHasChanged(val1)

  useEffect(() => {
    if (hasVal1Changed ) {
      console.log("val1 has changed");
    }
  });

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

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

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

Demo

Saya baru saja menerbitkan react-delta yang memecahkan skenario semacam ini. Menurut saya, useEffecttanggung jawabnya terlalu banyak.

Tanggung jawab

1. Ini membandingkan semua nilai dalam larik ketergantungannya menggunakan Object.is
2. Ini menjalankan callback efek / pembersihan berdasarkan hasil # 1

Memutus Tanggung Jawab

react-deltamemecah useEffecttanggung jawab menjadi beberapa kait yang lebih kecil.

Tanggung jawab # 1

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

Tanggung jawab # 2

• useConditionalEffect(callback, boolean)

Menurut pengalaman saya, pendekatan ini lebih fleksibel, bersih, dan ringkas daripada useEffect/ useRefsolutions.

Keluar dari jawaban yang diterima, solusi alternatif yang tidak memerlukan pengait khusus:

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

Karena status tidak digabungkan erat dengan instance komponen dalam komponen fungsional, status sebelumnya tidak dapat dicapai useEffecttanpa menyimpannya terlebih dahulu, misalnya dengan useRef. Ini juga berarti bahwa pembaruan status mungkin salah diimplementasikan di tempat yang salah karena status sebelumnya tersedia di dalam setStatefungsi updater.

Ini adalah kasus penggunaan yang baik useReduceryang menyediakan penyimpanan mirip Redux dan memungkinkan untuk mengimplementasikan pola masing-masing. Pembaruan status dilakukan secara eksplisit, jadi tidak perlu mencari tahu properti negara mana yang diperbarui; ini sudah jelas dari tindakan yang dikirim.

Berikut adalah contoh tampilannya:

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

Menggunakan Ref akan memperkenalkan jenis bug baru ke dalam aplikasi.

Mari kita lihat kasus ini menggunakan usePreviouskomentar seseorang sebelumnya:

1. prop.minTime: 5 ==> ref.current = 5 | atur ref. arus
2. prop.minTime: 5 ==> ref.current = 5 | nilai baru sama dengan ref.current
3. prop.minTime: 8 ==> ref.current = 5 | nilai baru TIDAK sama dengan ref.current
4. prop.minTime: 5 ==> ref.current = 5 | nilai baru sama dengan ref.current

Seperti yang bisa kita lihat di sini, kita tidak memperbarui internal refkarena kita sedang menggunakanuseEffect

Untuk perbandingan prop yang sangat sederhana, Anda dapat menggunakan useEffectuntuk memeriksa dengan mudah apakah sebuah prop telah diperbarui.

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

useEffect hanya akan menjalankan kode Anda jika prop berubah.

Berikut hook khusus yang saya gunakan yang menurut saya lebih intuitif daripada menggunakan 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)
}

Anda akan menggunakan useTransitionsebagai berikut.

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

Semoga membantu.

Jika Anda lebih suka useEffectpendekatan pengganti:

const usePreviousEffect = (fn, inputs = []) => {
  const previousInputsRef = useRef([...inputs])

  useEffect(() => {
    fn(previousInputsRef.current)
    previousInputsRef.current = [...inputs]
  }, inputs)
}

Dan gunakan seperti ini:

usePreviousEffect(
  ([prevReceiveAmount, prevSendAmount]) => {
    if (prevReceiveAmount !== receiveAmount) // side effect here
    if (prevSendAmount !== sendAmount) // side effect here
  },
  [receiveAmount, sendAmount]
)

Perhatikan bahwa pertama kali efek dijalankan, nilai sebelumnya yang diteruskan ke Anda fnakan sama dengan nilai masukan awal Anda. Ini hanya penting bagi Anda jika Anda ingin melakukan sesuatu ketika nilainya tidak berubah.

Anda dapat menggunakan useImmer sebagai lawan useState dan mengakses status. Contoh: https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/