Як порівнювати старі та нові Values ​​на React Hooks useEffect?

Скажімо, у мене є 3 входи: rate, sendAmount і acceptAmount. Я поставив, що 3 входи на useEffect відрізняються парами. Правила такі:

• Якщо sendAmount змінився, я обчислюю receiveAmount = sendAmount * rate
• Якщо прийом змінено, я підрахував sendAmount = receiveAmount / rate
• Якщо показник змінився, я обчислюю, receiveAmount = sendAmount * rateколи sendAmount > 0я обчислю, sendAmount = receiveAmount / rateколиreceiveAmount > 0

Ось codeandbox https://codesandbox.io/s/pkl6vn7x6j, щоб продемонструвати проблему.

Чи є спосіб порівняти oldValuesі newValuesподібне, componentDidUpdateа не зробити 3 обробники для цього випадку?

Дякую

Ось моє остаточне рішення з usePrevious https://codesandbox.io/s/30n01w2r06

У цьому випадку я не можу використовувати декілька, useEffectоскільки кожна зміна веде до одного і того ж мережевого дзвінка. Тому я також використовую changeCountдля відстеження змін. Це changeCountтакож корисно відслідковувати зміни лише від локальних, тому я можу запобігти зайвим мережевим дзвінкам через зміни з боку сервера.

Ви можете написати спеціальний гачок, щоб надати вам попередній реквізит за допомогою UseRef

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

а потім використовувати його в 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])
}

Однак його зрозуміліше і, можливо, краще і зрозуміліше читати і розуміти, якщо ви використовуєте два useEffectокремо для кожного ідентифікатора зміни, ви хочете обробити їх окремо

Якщо ви хочете, щоб хтось шукав TypeScript-версію usePrevious:

import { useEffect, useRef } from "react";

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

Варіант 1 - використовувати гачок

Порівняння поточного значення з попереднім значенням є загальною схемою і виправдовує власну власну гачку, яка приховує деталі реалізації.

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

Демо

Варіант 2 - запустіть useEffect, коли значення змінюється

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

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

Демо

Я щойно опублікував react-delta, який вирішує саме такий сценарій. На мою думку, useEffectмає занадто багато обов'язків.

Обов’язки

1. Він порівнює всі значення у своєму масиві залежностей за допомогою Object.is
2. Він працює за ефектом / очищенням викликів за результатами №1

Порушення відповідальності

react-deltaрозбиває useEffectобов'язки на кілька менших гачків.

Відповідальність №1

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

Відповідальність №2

• useConditionalEffect(callback, boolean)

На мій досвід, такий підхід є більш гнучким, чистим та стислим, ніж useEffect/ useRefрішення.

Так як стан не тісно пов'язане з екземпляром компонента в функціональних компонентах, попередній стан не може бути досягнуто в useEffectбез збереження його в першу чергу, наприклад, з useRef. Це також означає, що оновлення стану, можливо, було неправильно здійснено в неправильному місці, оскільки попередній стан доступний у setStateфункції оновлення.

Це хороший випадок використання, useReducerякий забезпечує крамницю, схожу на Redux, і дозволяє реалізувати відповідний зразок. Оновлення штатів виконуються явно, тому не потрібно з'ясовувати, яке державне властивість оновлюється; це вже зрозуміло з розісланих дій.

Ось приклад, як це може виглядати:

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 введе новий вид помилок у додаток.

Давайте розглянемо цей випадок, використовуючи usePreviousтой, хто раніше коментував:

1. prop.minTime: 5 ==> ref.current = 5 | встановити ref.current
2. prop.minTime: 5 ==> ref.current = 5 | нове значення дорівнює ref.current
3. prop.minTime: 8 ==> ref.current = 5 | нове значення НЕ дорівнює ref.current
4. prop.minTime: 5 ==> ref.current = 5 | нове значення дорівнює ref.current

Як ми можемо бачити тут, ми не оновлюємо внутрішнє, refоскільки використовуємоuseEffect

Для дійсно простого порівняння опори ви можете використовувати useEffect, щоб легко перевірити, чи оновлення оновлення оновлено.

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

}

useEffect тоді запустить ваш код лише в тому випадку, якщо опора зміниться.

Відмовившись від прийнятої відповіді, альтернативного рішення, яке не потребує спеціального гака:

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

Ось користувацький гачок, який я використовую, який, на мою думку, є більш інтуїтивним, ніж використання 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)
}

Ви б використовували useTransitionнаступне.

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

Сподіваюся, що це допомагає.