レンダリングの最適化

1048 ワード

render memo テキストリンク

次の内容はノマドコッドの授業で学んだ内容に基づいて書かれています.
memo
関数のステータスが変更されると、関数が再表示されます.当然のことだと思いますが、親構成部品のステータスを変更すると、変更する必要のない子構成部品が変更される場合があります.
例:

function App() {
    const [value, setValue] = React.useState(0);
    
    render(
        <Comp1 prop={value} />
        <Comp2 />
    );
}

ステータスがvalueに変更された場合、直接関連付けられているため、Comp 1を再表示するのは正しいが、影響を受けないComp 2に再表示されるため、Reactを使用する理由は消えてしまう.
このため、memo()という関数が存在する.const Memorization = React.memo(Comp2);前述したように、React.memo(Comp2)を使用し、App()の関数で「オブジェクト化」という要素を使用すると、propsが変化した場合にのみ、Comp 2がレンダリングされる.

Reference

この問題について(レンダリングの最適化), 我々は、より多くの情報をここで見つけました https://velog.io/@tank3a/렌더링-최적화

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[Java Script]反復文

MySQLエントリーシートの作成、変更、削除