フック[メモ]と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インラインキャッシュ機能、用時に起因する変更レンダリング原因繰り返しサブアセンブリに新しいプロパティの形成を防止する機能