useMemo의 소스 코드:-JS 튜토리얼-php.cn

useMemo의 소스 코드:

Patricia Arquette

풀어 주다： 2024-10-04 18:21:31

원래의

963명이 탐색했습니다.

The source code of useMemo:

마운트와 업데이트라는 두 가지 상황이 있으므로 useMemo에는 mountMemo와 updateMemo라는 두 가지 구현이 있습니다.

mountMemo 소스 코드:


function mountMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const nextValue = nextCreate();
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    setIsStrictModeForDevtools(true);
    nextCreate();
    setIsStrictModeForDevtools(false);
  }
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

로그인 후 복사

설명:
마운트 단계에서 useMemo 함수는 콜백 함수를 호출하여 값을 계산하고 반환합니다. 값과 deps를 Hook.memoizedState에 저장하세요.

mountWorkInProgressHook을 사용하여 후크 개체를 생성하세요.
nextDeps에 deps를 저장하세요.
nextCreate()를 호출하여 nextValue를 가져옵니다. 개발 환경이라면 두 번 호출하세요.
nextValue와 nextDeps를 Hook.memoizedState에 저장하고 nextValue를 반환합니다.

updateMemo 소스 코드:


function updateMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  // Assume these are defined. If they're not, areHookInputsEqual will warn.
  if (nextDeps !== null) {
    const prevDeps: Array<mixed> | null = prevState[1];
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      return prevState[0];
    }
  }
  const nextValue = nextCreate();
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    setIsStrictModeForDevtools(true);
    nextCreate();
    setIsStrictModeForDevtools(false);
  }
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

로그인 후 복사

설명:
업데이트 단계에서 React는 deps가 변경되었는지 여부를 판단하고, 변경된 경우 React는 콜백을 실행하여 새 값을 가져오고 반환합니다. 변경하지 않으면 React는 이전 값을 반환합니다.

새 후크 개체 가져오기: Hook = updateWorkInProgressHook();
deps 배열이 비어 있는 경우(nextDeps !== null), 렌더링할 때마다 콜백 함수를 호출하고 새 값을 반환합니다.
deps 배열이 비어 있지 않으면 (areHookInputsEqual(nextDeps, prevDeps))인 경우 deps가 변경되었는지 여부를 판단합니다. 변경되지 않은 경우 이전 값을 반환합니다. return prevState[0];.

위 내용은 useMemo의 소스 코드:의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!