Как сравнить oldValues ​​и newValues ​​в React Hooks useEffect?

Допустим, у меня есть 3 входа: скорость, sendAmount и receiveAmount. Я поставил эти 3 входа на использование различных параметров. Правила таковы:

• Если sendAmount изменился, я рассчитываю receiveAmount = sendAmount * rate
• Если полученная сумма изменилась, я рассчитываю sendAmount = receiveAmount / rate
• Если ставка изменилась, я рассчитываю receiveAmount = sendAmount * rateкогда sendAmount > 0или я вычисляю sendAmount = receiveAmount / rateкогдаreceiveAmount > 0

Вот коды и окно 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отдельно для каждого идентификатора изменения, который вы хотите обработать отдельно.

Incase кто-нибудь ищет версию использования TypeScriptPrevious:

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

демонстрация

Я только что опубликовал ответную дельту, которая решает именно этот сценарий. На мой взгляд, 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])

Надеюсь, это поможет.