useMemo vs. useEffect + useState

useMemo vs. useEffect + useState

를 사용하면 어떤 이점이 있습니까?useMemo(예를 들어 부하가 높은 함수 호출의 경우)를 조합하여 사용하는 대신useEffect그리고.useState?

여기 첫눈에 딱 맞는 두 개의 커스텀 훅이 있습니다.useMemo의 반환가치는 다음과 같습니다.null첫 번째 렌더링:

use Effect & use State

import { expensiveCalculation } from "foo";

function useCalculate(someNumber: number): number | null {
  const [result, setResult] = useState<number | null>(null);

  useEffect(() => {
    setResult(expensiveCalculation(someNumber));
  }, [someNumber]);

  return result;
}

useMemo

import { expensiveCalculation } from "foo";

function useCalculateWithMemo(someNumber: number): number {
    return useMemo(() => {
        return expensiveCalculation(someNumber);
    }, [someNumber]);
};

둘 다 모수가 나올 때마다 결과를 계산합니다.someNumber변경사항, 메모화는 어디서 이루어집니까?useMemo시작했어?

그useEffect그리고.setState변경 시마다 추가 렌더링이 발생합니다.첫 번째 렌더링은 오래된 데이터로 "지연"되고 나서 새로운 데이터로 즉시 추가 렌더가 큐잉됩니다.

---

예를 들어 다음과 같습니다.

// Maybe I'm running this on a literal potato
function expensiveCalculation(x) { return x + 1; };

예를 들어x초기값은 0 입니다.

• 그useMemo버전이 즉시 렌더링합니다.1.
• 그useEffect버전 렌더링null그런 다음 컴포넌트가 효과를 렌더링하고 상태를 변경하고 새 렌더를 큐잉한 후1.

그럼 우리가 바뀌면x2:

• 그useMemo실행 및3렌더링 됩니다.
• 그useEffect버전 실행 및 렌더링1다시, 효과가 트리거되고 컴포넌트가 올바른 값으로 재실행됩니다.3.

빈도로 볼 때론expensiveCalculation동작은 동일하지만,useEffect다른 이유로 퍼포먼스에 악영향을 미치는 렌더링의 2배의 원인이 되고 있습니다.

게다가,useMemoIMO, 버전이 더 깔끔하고 읽기 쉬울 뿐입니다.불필요한 가변 상태를 도입하지 않고 움직이는 부분이 적습니다.

그래서 그냥 쓰는 게 낫겠다.useMemo여기서.

둘 중 하나를 선택할 때 고려해야 할 두 가지 요점이 있다고 생각합니다.

1. 함수가 호출된 시간.

useEffect컴포넌트가 렌더링된 후 호출되므로 이 컴포넌트에서 DOM에 액세스할 수 있습니다.예를 들어 참조를 통해 DOM 요소에 액세스하려면 이 기능이 중요합니다.

2. 시멘틱 보증

useEffect의존관계가 변경되지 않은 경우 부팅되지 않음을 보증합니다. useMemo그런 보장은 없습니다.

React 문서에서 설명한 바와 같이 useMemo는 순수 최적화 기술로 간주해야 합니다.useMemo 를 통상의 함수 호출로 치환해도, 프로그램은 정상적으로 동작합니다.

useEffect+useState를 사용하여 업데이트를 제어할 수 있습니다.순환 의존성을 해소하고 무한 업데이트 루프를 방지합니다.

비동기성 이외에 설계방법에 차이가 있을 수 있습니다.

useEffect는 비동기 여부에 관계없이 모든 컴포넌트가 렌더링된 후에 수집되는 콜입니다.

useMemo는 로컬 콜이며 이 컴포넌트와만 관련이 있습니다. 만 하면 요.useMemo마지막 업데이트의 할당을 사용할 수 있는 이점이 있는 다른 할당문으로 사용합니다.

,, ,,useMemo급하고, 그 다음에 더 is is is is is isuseLayoutEffect 마지막은 '아예'입니다.useEffect.

언급URL : https://stackoverflow.com/questions/56028913/usememo-vs-useeffect-usestate