React Hooks useEffect에서 oldValues와 newValues를 비교하는 방법은 무엇입니까?

rate, sendAmount 및 receiveAmount의 세 가지 입력이 있다고 가정합니다. 3 개의 입력을 useEffect diffing params에 넣었습니다. 규칙은 다음과 같습니다.

• sendAmount가 변경되면 계산 receiveAmount = sendAmount * rate
• receiveAmount가 변경되면 계산 sendAmount = receiveAmount / rate
• 속도를 변경 한 경우, 내가 계산할 receiveAmount = sendAmount * rate때 sendAmount > 0또는 내가 계산할 sendAmount = receiveAmount / rate때receiveAmount > 0

다음은 문제를 설명하기 위한 코드 샌드 박스 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에 대해 두 개를 별도로 사용 하여 개별적으로 처리하려는 경우 읽고 이해하기가 더 명확하고 아마 더 좋고 명확합니다.

누구든지 TypeScript 버전의 사용을 찾고있는 경우

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-deltauseEffect의 책임을 여러 개의 작은 고리로 나눕니다 .

책임 # 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 ==> 참조 전류 = 5 | 기준 전류 설정
2. prop.minTime : 5 ==> 참조 전류 = 5 | 새로운 값은 참조 전류와 같습니다.
3. prop.minTime : 8 ==> 참조 전류 = 5 | 새로운 값은 참조 전류와 같지 않습니다
4. prop.minTime : 5 ==> 참조 전류 = 5 | 새로운 값은 참조 전류와 같습니다.

우리가 볼 수 있듯이, 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])

희망이 도움이됩니다.