useMemo/useCallback 将来可能性のある隐患以上および実行可能な対策

原因

You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.

続きを読む React コア チーム メンバー

社区已经有的代替案

現在 useRef と useMemo useCallback 具体的な実装原理

    function useRef<T>(initialValue: T): {|current: T|} {
      currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
      workInProgressHook = createWorkInProgressHook();
      const previousRef = workInProgressHook.memoizedState;
      if (previousRef === null) {
        const ref = {current: initialValue};
        if (__DEV__) {
          Object.seal(ref);
        }
        workInProgressHook.memoizedState = ref;
        return ref;
      } else {
        return previousRef;
      }
    }

    function useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
      currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
      workInProgressHook = createWorkInProgressHook();

      const nextDeps = deps === undefined ? null : deps;

      if (workInProgressHook !== null) {
        const prevState = workInProgressHook.memoizedState;
        if (prevState !== null) {
          if (nextDeps !== null) {
            const prevDeps = prevState[1];
            if (areHookInputsEqual(nextDeps, prevDeps)) {
              return prevState[0];
            }
          }
        }
      }

      if (__DEV__) {
        isInHookUserCodeInDev = true;
      }
      const nextValue = nextCreate();
      if (__DEV__) {
        isInHookUserCodeInDev = false;
      }
      workInProgressHook.memoizedState = [nextValue, nextDeps];
      return nextValue;
    }

    export function useCallback<T>(
      callback: T,
      deps: Array<mixed> | void | null,
    ): T {
      return useMemo(() => callback, deps);
    }

相关料