React에서 종속성 캐싱 및 useCallback 참조 이해
P粉044526217
P粉044526217 2023-08-15 19:29:37
0
1
428

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

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

P粉044526217
P粉044526217

모든 응답 (1)
P粉170438285

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

예를 들어f(x,y)=>x+y함수가 있는 경우 빈 종속성 배열useCallback((x,y)=>x+를 사용할 수 있습니다. y,[]), 이 함수는 절대 변경되지 않습니다. 출력을 구문 분석하는 데 인수만 사용하기 때문에 항상 일관된 동작을 생성합니다. 그러나 다른 함수h와 다른 외부 값z가 있고hh(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

가 있습니다.

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

으아악

도움이 되길 바랍니다
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!