Reactソース読解-7_038

Reactソース読解-7memo React.memoは、高次コンポーネントである.React.PureComponentとよく似ていますが、関数コンポーネントには適用されますが、classコンポーネントには適用されません.

const MyComponent = React.memo(function MyComponent(props) {
  /*    props    */
});

関数コンポーネントが同じpropsで同じ結果をレンダリングする場合は、React.memoにパッケージして呼び出すことで、コンポーネントのレンダリング結果を記憶することでコンポーネントのパフォーマンスを向上させることができます.これは、この場合、Reactがレンダリングコンポーネントの動作をスキップし、最後のレンダリングの結果を直接多重化することを意味する.
このメソッドは、パフォーマンスの最適化の方法としてのみ存在します.ただし、bugが生成されるため、レンダリングを「ブロック」しないでください.
デフォルトでは複雑なオブジェクトのみを浅いコントラストにします.コントラストプロセスを制御する場合は、カスタム比較関数を2番目のパラメータで入力します.

function MyComponent(props) {
  /*    props    */
}
function areEqual(prevProps, nextProps) {
  /*
      nextProps    render         
    prevProps    render              true，
       false
  */
}
export default React.memo(MyComponent, areEqual);

React.memo（）の使用時期
コンポーネントは常に再レンダリングされ、また多くの内容が悪い.純粋なディスプレイコンポーネントは、同じpropsをレンダリングする、例えば数字の更新だけで、その他は変化しない.

// Initial render


// After 1 second, views is 10


// After 2 seconds, views is 25



function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    

      
      Movie views: {views}
    
  )
}
// etc

React.memo() and callback functions
ここでのcallbackとは、usecallback reactが新たに追加するapiをいう.まだその部分を見ていないので、とりあえずmark

const MemoizedLogout = React.memo(Logout);

function MyApp({ store, cookies }) {
  const onLogout = useCallback(() => cookies.clear(), [cookies]);
  return (
    

      

        
      
      {store.content}
    
  );
}

https://segmentfault.com/a/11...
https://dmitripavlutin.com/us...
https://zh-hans.reactjs.org/d...