useCallback 도움말 코드는 어떻게 더 빠르게 실행되나요?

Question

그래서 useCallback이 함수를 캐시할 수 있다고 하는데, 코드 실행 속도를 빠르게 하려는 의도인 것 같습니다.

예를 들어 다음과 같은 경우가 있습니다.

 const handlerChange = (ev) =>
    setMsg(ev.target.value);
  };

다음과 같이 변경할 수도 있습니다.

 const handlerChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }, []);

이제 함수가 캐시되었습니다. 그런데 컴포넌트가 다시 렌더링될 때 이 함수를 생성해야 합니까?

테스트를 위해 IIFE로 변경하여 함수가 출력되도록 했고, 함수가 출력되고 있다고 인쇄했습니다.

참조: https://codesandbox.io/s/jolly-nightingale-zxqp8k

따라서 입력 상자에 무언가를 입력할 때마다 콘솔에 표시된 것처럼 새로운 함수가 출력됩니다. 이는 IIFE가 매번 실행된다는 의미이며, 이는 IIFE가 아니더라도 함수 리터럴이 매번 함수 개체로 변환된다는 의미이기도 합니다. 그렇다면 이 도움말 코드는 어떻게 더 빠르게 실행됩니까?

Answer 1

네, 맞습니다. 각 렌더링은 새로운 함수를 생성한 다음 캐시된 함수로 대체됩니다.

속도가 빨라지는 것은 함수 생성 단계를 건너뛰는 것이 아니라 다른 코드가 자체 작업을 건너뛸 수 있기 때문입니다. 매번 동일한 함수를 전달하면 관련 내용이 변경되지 않았음을 알기 때문입니다.

예를 들어 종속성 배열에 handleChange传递给useEffect를 포함해야 하는 경우 매번 안정적인 참조를 전달하는 것이 중요합니다. 그렇지 않으면 렌더링할 때마다 효과가 다시 실행됩니다.

으아악

또는 handleChange作为prop传递给一个组件，并且该组件想要使用React.memo 렌더링을 건너뛰는 경우. 소품이 변경되지 않은 경우에만 렌더링을 건너뛸 수 있습니다:

으아악