후크 [메모] useCallback 및 성능 최적화하게 반응

머리말

최근 이러한 새로운 기능을 가진 새로운 프로젝트의 TS + 후크의 개발, 첨단 재료의 개발이 멋진 느낌이 매우 부드러운이며, 항상 자신을 구출 할 수없는 구덩이를 강화.

문제 설명

이 같은 디렉토리 구조 뭔가

--RtDetail
----Home
------index.scss
------index.tsx
----Search
------index.scss
------index.tsx
----Detail
------index.scss
------index.tsx

이런 그럼 내가 검색 및 상세 구성 요소 홈 구성 요소를 도입, 의사 코드 뭔가

/** 
 * Home.tsx 伪代码 
 * 大概就是引入了Search和Detail，给Search传入一个回调，当Search的输入框改变时候，触发更改Home中的searchId
 */
...
let Home = () => {
    const [searchId, setSearchId] = useState(0)

    const handleSearchIdChange = (e) => {
         console.log('handleSearchChange 被创建了')
         setSearchId(e.target.value)
    }
    
    return (
        <>
            <Search handleSearchId={handleSearchId}/>
            <Detail />
        </>
    )
}

export default Home

/** Search.tsx 伪代码 */
...
let Search = (props: ISearchProps) => {
    
    const { handleSearchId } = props

    return (
        <>
            <input onChange={(e) => {handleSearchId(e)}}/>
        </>
    )
}

export default Search
...

/** Detail.tsx */
...
let Detail = () => {

    console.log('Detail Component 被渲染了')
    return (
        <span>test</span>
    )
}

export default Detail
...

홈 상태는 다음과 같은 두 가지 질문에지도 시간을 seachId에서 모든 변경 검색 :

• 1.Detail이 동반되는 재생성 성능이 불필요하게 낭비 초래
• 2.Home 성분, handleSearchId 방법은 다시 생성되고

솔루션

메모 + useCallback

사용에 대한 질문 1 메모

/** 对Detail组件，包上一层memo，这是hooks提供的一个api */
...
let Detail = memo(() => {

    console.log('Detail Component 被渲染了')
    return (
        <span>test</span>
    )
})

export default Detail

React.memo 유사한 React.PureComponent은 비효율적 요소를 렌더링 반복을 방지하기 위해, 소품 상대적으로 얕은 할 수있다!

질문 2를 사용 useCallback의 경우

/** 改写Home.tsx */
...
let Home = () => {
    const [searchId, setSearchId] = useState(0)

    const handleSearchIdChange = (e) => {
         console.log('handleSearchChange 被创建了')
         setSearchId(e.target.value)
    }
    
    return (
        <>
            <Search handleSearchId={handleSearchId}/>
            <Detail />
        </>
    )
}

export default Home

useCallback 인라인 캐싱 기능을위한 경우 의한 갱신 묘화 원인 반복 조립체 새로운 특성의 형성을 방지하는 기능