React에서 종속성 캐싱 및 useCallback 참조 이해

Question

useCallback 후크는 함수 참조만 캐시합니까, 아니면 함수 자체의 값/결과도 캐시합니까? 또한 종속성 배열에서 ref를 사용하면 실제로 구성 요소의 ref와 같은 효과가 있습니까? 그렇지 않은 경우 참조 값 변경이 적절한 효과를 갖도록 하는 방법이 있습니까?

원래는 함수 참조만 캐시될 것이라고 생각했지만 기사를 읽은 후 useCallback(fn, deps)가 useMemo(() => fn, deps)와 동일하다는 것을 알게 되었고 잘 모르겠습니다. 이것이 사실이라면 실제로도 그렇습니다. 그리고 컴포넌트의 ref를 의존성(Video.js, React-Slick 등)으로 사용해 보았지만 다른 의존성에 비해 큰 영향은 없는 것 같습니다.

Answer 1

예, useCallback의 목적은 지정한 종속성이 변경되지 않는 한 함수가 렌더링 간에 참조를 유지하도록 허용하는 것입니다.

예를 들어 f(x,y)=>x+y 함수가 있는 경우 빈 종속성 배열 useCallback((x,y)=>x+를 사용할 수 있습니다. y,[]), 이 함수는 절대 변경되지 않습니다. 출력을 구문 분석하는 데 인수만 사용하기 때문에 항상 일관된 동작을 생성합니다. 그러나 다른 함수 h와 다른 외부 값 z가 있고 h가 h(x, y)=>x+y+z인 경우 종속성에 z를 포함해야 합니다. 그러면 z가 변경되면 f(x,y)=>x+y，你可以使用空的依赖数组useCallback((x,y)=>x+y,[])，这个函数将永远不会改变。它始终会产生一致的行为，因为它只使用其参数来解析输出。但是，如果你有另一个函数h和另一个外部值z，它可能会发生变化，而且h定义为h(x,y)=>x+y+z，那么你需要将z包含在依赖项中，以便如果z发生变化，从useCallback에서 반환된 함수는 새로운 참조.

따라서 useCallback的用途通常是当你传递函数时，它不会触发子组件重新渲染，或者当你在子组件的useEffect声明中使用函数作为依赖项时。如果函数内部的操作很昂贵，那么useCallback의 사용은 일반적으로 하위 구성 요소가 다시 렌더링되도록 트리거하지 않도록 함수를 전달하거나 해당 함수를 하위 구성 요소의 useEffect 선언에서 종속성으로 사용할 때 사용됩니다. 함수 내부의 연산 비용이 많이 든다면

는 덜 유용하므로 결과를 별도로 기억해야 합니다.

ref的事情，我认为在依赖项中包含ref并不会有任何作用，它就像数组为空一样。也许如果ref

상태로 저장되는 것에 대해 유용할 수도 있지만 잘 모르겠습니다.

여기에 유용할 수 있는 몇 가지 예가 있는 링크 https://stackblitz.com/edit/stackblitz-starters-wwyw9f?file=src%2FApp.tsx

가 있습니다.

삭제될 경우 여기에 붙여넣을 수도 있습니다.

으아악

도움이 되길 바랍니다🎜