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

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

Поскольку состояние не тесно связано с экземпляром компонента в функциональных компонентах, предыдущее состояние не может быть достигнуто в 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 handleChangeEvent(e) {
  const { name, value } = e.target;
  dispatch({
    type: name,
    payload: value
  });
}

...
const [state, dispatch] = useReducer(reducer, {
  rate: 2,
  sendAmount: 0,
  receiveAmount: 0
});
...

Вариант 1 - запускать useEffect при изменении значения

const Component = (props) => {

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

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

Демо

Вариант 2 - хук useHasChanged

Сравнение текущего значения с предыдущим значением является распространенным шаблоном и оправдывает собственный собственный крючок, скрывающий детали реализации.

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

  useEffect(() => {
    if (hasVal1Changed ) {
      console.info("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;
}

Демо

На случай, если кто-то ищет версию использования TypeScript.

В модуле .tsx:

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

Или в модуле .ts:

import { useEffect, useRef } from "react";

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

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

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

useEffect будет запускать ваш код только в том случае, если свойство изменится.

Использование Ref внесет в приложение новый вид ошибки.

Давайте посмотрим на этот случай с использованием usePrevious, который кто-то ранее прокомментировал:

1. prop.minTime: 5 ==> ref.current = 5 | установить опорный ток
2. prop.minTime: 5 ==> ref.current = 5 | новое значение равно справочному току
3. prop.minTime: 8 ==> ref.current = 5 | новое значение НЕ равно справочному току
4. prop.minTime: 5 ==> ref.current = 5 | новое значение равно справочному току

Как мы видим здесь, мы не обновляем внутренний ref, потому что мы используем useEffect.

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

Исходя из принятого ответа, альтернативного решения, не требующего настраиваемого крючка:

const Component = ({ receiveAmount, sendAmount }) => {
  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]);
};

Это предполагает, что вам действительно нужна ссылка на предыдущие значения для чего-либо в битах «процесс здесь». В противном случае, если ваши условия не выходят за рамки прямого сравнения !==, самым простым решением здесь было бы просто:

const Component = ({ receiveAmount, sendAmount }) => {
  useEffect(() => {
     // process here
  }, [receiveAmount]);

  useEffect(() => {
     // process here
  }, [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])

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

Если вы предпочитаете подход замены useEffect:

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

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

И используйте это так:

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

Обратите внимание, что за время выполнения эффекта первый предыдущие значения, переданные в ваш fn, будут такими же, как ваши исходные входные значения. Это будет иметь значение для вас только в том случае, если вы захотите что-то сделать при изменении значения не.

Вы можете использовать useImmer вместо useState и получить доступ к состоянию. Пример: https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/

В вашем случае (простой объект):

useEffect(()=>{
  // your logic
}, [rate, sendAmount, receiveAmount])

В другом случае (сложный объект)

const {cityInfo} = props;
useEffect(()=>{
  // some logic
}, [cityInfo.cityId])

Мне не понравился ни один из приведенных выше ответов, мне нужна была возможность передавать массив логических значений, и если одно из них истинно, поэтому повторно выполните рендеринг

/**
 * effect fires if one of the conditions in the dependency array is true
 */
export const useEffectCompare = (callback: () => void, conditions: boolean[], effect = useEffect) => {
  const shouldUpdate = useRef(false);
  if (conditions.some((cond) => cond)) shouldUpdate.current = !shouldUpdate.current;
  effect(callback, [shouldUpdate.current]);
};

//usage - will fire because one of the dependencies is true.
useEffectCompare(() => {
  console.info('test!');
}, [false, true]);