작아 질 것이라는 것을 알고 있지만 React 컴포넌트 외부에 함수를 배치하면 성능 차이가 있습니까?
예 : 버전 1 :
const handleFetch = () => {
// Make API call
}
const MyComponent = () => {
useEffect(()=>{
handleFetch();
})
return(<p>hi</p>)
}
Vs 버전 2 :
const MyComponent = () => {
const handleFetch = () => {
// Make API call
}
useEffect(()=>{
handleFetch();
})
return(<p>hi</p>)
}
버전 1에서는 다시 렌더링 handleFetch할 때 MyComponent다시 생성되지 않습니까?
React 컴포넌트 외부에 함수를두면 성능 차이가 있습니까?
예,하지만 구성 요소 내부에 함수를 정의하기로 결정하는 경우 눈에 띄는 성능 저하가 발생하지 않을 것입니다. 거의 항상 애플리케이션의 나머지 성능이 구성 요소에 함수를 넣는 비용을 가려줍니다. 일반적으로 함수 구성 요소에 정의 된 함수에 대한 React의 FAQ에서 인용했습니다.
렌더에서 함수를 생성하기 때문에 후크가 느립니까?
아니요. 최신 브라우저에서 클래스에 비해 클로저의 원시 성능은 극단적 인 시나리오를 제외하고는 크게 다르지 않습니다.
https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render
버전 1에서는 MyComponent가 다시 렌더링 될 때 handleFetch가 다시 생성되지 않습니까?
아니요, handleFetch기능 구성 요소 외부에 정의되어 있으므로 다시 생성되지 않습니다 . handleFetchMyComponent가 다시 렌더링 될 때 버전 2에서만 다시 생성됩니다.
또 다른 참고 : useCallback은 함수 재생성을 피하지 않습니다 (여전히 useCallback에도 새 함수를 전달 함).
일반적으로 구성 요소 내부에 함수를 정의한 다음 번거롭지 않거나 여러 구성 요소간에 재사용 할 수있는 경우 추출합니다. 때로는 추출 할 때 구성 요소에서 함수로 변수를 전달하기 위해 2 개 이상의 추가 매개 변수를 추가해야합니다. 그러나 기능 구성 요소 내부에두면 매개 변수가 필요하지 않습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다