React Hooks useEffectでoldValuesとnewValuesを比較する方法は？

たとえば、rate、sendAmount、およびreceiveAmountの3つの入力があるとします。その3つの入力をuseEffect diffing paramsに配置しました。ルールは次のとおりです。

• sendAmountが変更された場合、計算します receiveAmount = sendAmount * rate
• receiveAmountが変更された場合、計算します sendAmount = receiveAmount / rate
• レートを変更した場合、私は計算しreceiveAmount = sendAmount * rateたときsendAmount > 0または私が計算しsendAmount = receiveAmount / rateたときにreceiveAmount > 0

これがcodesandbox https://codesandbox.io/s/pkl6vn7x6jです問題を実証するです。

比較する方法があるoldValuesとnewValues上の好きは、componentDidUpdate代わりに、このような場合のために3つのハンドラを作るのは？

ありがとう

これがhttps://codesandbox.io/s/30n01w2r06の私の最終的な解決策ですusePrevious

この場合、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変更IDごとに2つを個別に使用して個別に処理したい場合は、それらを読んで理解するほうがより明確で、おそらくより適切で明確です。

誰かが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-useCompareフック

現在の値を以前の値と比較することは一般的なパターンであり、実装の詳細を隠す独自のカスタムフックを正当化します。

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アップデーター関数ます。

これはuseReducerReduxのようなストアを提供し、それぞれのパターンを実装できる良いユースケースです。状態の更新は明示的に実行されるため、どの状態プロパティが更新されているかを知る必要はありません。これはディスパッチされたアクションからすでに明らかです。

以下はその例です。

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 | 参照電流を設定
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])

}

その後、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])

お役に立てば幸いです。