Reactメモ：単純なメモ化で反応性能をブーストします

導入

Reactアプリケーションは、多くの場合、不必要な再レンダーがパフォーマンスに大きな影響を与える可能性のある大きなデータセットと複雑なコンポーネントを扱います。これに対処するために、ReactはReact.memoを提供します。これは、コンポーネントを最適化し、レンダリング時間を短縮するためのシンプルで強力なツールです。このガイドでは、React Memoがどのように機能するか、なぜそれが役立つのか、それを段階的に実装する方法を探ります。

Reactメモとは何ですか？

React.memoは、機能的成分をメモ化するのに役立つReactの高次コンポーネント（HOC）です。メモは、その入力に基づいて関数の出力をキャッシュするプロセスであるため、同じ入力の結果を再計算する必要はありません。 Reactメモは同様に機能します。コンポーネントの最後のレンダリングされた出力を「覚えている」、小道具が変更された場合にのみ再レンダリングします。

なぜメモを反応するのですか？

反応では、コンポーネントが親コンポーネントが再レンダリングするたびに再レンダリングします。コンポーネントの出力が親の変化に依存しない場合、これは非効率性を引き起こす可能性があります。たとえば、多くのコンポーネントを持つ複雑なUIでは、過度の再レンダーのために遅れが見られる場合があります。 Reactメモを使用すると、必要に応じてコンポーネントを更新することでこれを最適化できます。

問題の反応メモは解決します

1。不要な再レンダー

親コンポーネントが再レンダーを再貸し出す場合、その子コンポーネントも再レンダリングします。これにより、特にコンポーネントが静的データを表示したり、不変の小道具に依存したりする場合、パフォーマンスのボトルネックにつながる可能性があります。

2。複雑なUIでの遅いパフォーマンスまたは遅いパフォーマンス

誤った再レンダーのため、深くネストされたコンポーネントを備えたアプリケーションは、パフォーマンスの低下に直面する可能性があります。 Reactメモを使用したメモ化は、更新を必要としないコンポーネントの再レンダーを防ぐのに役立ち、アプリの応答性を高めます。

React Memoの仕​​組み：ステップバイステップの例

Reactメモの基本的な実装を見てみましょう。メモを使用しないシンプルなコンポーネントから始め、Reactメモを追加する方法を確認します。

ステップ1：Reactメモなしで簡単なカウンターコンポーネントを設定する

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

説明

この例では、カウント値が同じままであっても、入力フィールドを入力フィールドに入力するたびに、カウンターコンポーネントの再レンダーが再レンダーになります。これは、Reactメモで防ぐことができる不必要な再レンダリングです。

ステップ2：Reactメモで最適化します

さあ、それを最適化するためにカウンターコンポーネントをReact.memoで包みましょう。

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

説明

ruce.memoを使用して、カウンターコンポーネントがプロップのカウントが変更された場合にのみ再レンダーを再レンダーします。これで、入力フィールドを入力すると、カウンターの再レンダーがトリガーされなくなり、パフォーマンスが大幅に最適化されます。

対応メモの動作：リストを含む実用的なシナリオ

より複雑な例に飛び込み、Reactメモの本当の利点を確認しましょう。各アイテムの横に「いいね」ボタンがあるアイテムのリストがあるとします。個々のアイテムが好きなときに、Reactメモが過度の再レンダーを防ぐ方法を示します。

ステップ1：メモなしでリストコンポーネントを作成します

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like
    
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes   1 } : item
      )
    );
  };

  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

export default ItemList;

問題

上記のコードでは、1つのアイテムが1つのアイテムが好きな場合、1つのアイテムのみが変更されていても、すべてのアイテムが再レンダリングされます。

ステップ2：Reactメモを使用してアイテムコンポーネントを最適化します

const Item = React.memo(function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like ({item.likes})
    
  );
});

結果

今、あなたが気に入ってクリックするアイテムのみが再レンダリングされ、UIがはるかに高速かつ効率的になります。

React Memoを使用するのはいつですか？

Reactメモは特定のシナリオで役立ちますが、どこでもそれを使用すると、実際の利点を追加せずにコードを複雑にすることができます。特に効果的である可能性のあるいくつかの重要な状況を以下に示します：

1. 静的コンポーネント：ヘッダーやフッターなど、頻繁に変更されないコンポーネント。
2. 純粋な機能コンポーネント：レンダリングのための小道具のみに依存するコンポーネント。
3. コンポーネントの大きなリスト：不要な再レンダーを避ける必要がある多くのアイテムを含む。

潜在的な落とし穴とベストプラクティス

1. 浅い比較：Reactメモは浅い比較を行います。つまり、深くネストされたオブジェクトや配列の変化は検出されません。複雑な小道具を渡す場合は、usememoまたはusecallbackの使用を検討してください。

2. パフォーマンス監視：React Devtoolsを使用して、どのコンポーネントが実際にメモから利益をもたらすかを識別します。過剰なReactメモは、パフォーマンスの向上が無視できるコードの複雑さにつながる可能性があります。

よくある質問（FAQ）

Q1：React MemoはUsememoやUsecallbackとどのように違いますか？

• Reactメモプロップに基づいてコンポーネントの再レンダーを最適化します。
• usememo キャッシュコンポーネント内の計算値。
• usecallback キャッシュが機能し、すべてのレンダリングでそれらが再現されるのを防ぎます。

Q2：クラスコンポーネントを使用してReactメモを使用できますか？

いいえ、Reactメモは機能コンポーネント専用です。ただし、クラスコンポーネントの場合、Purecomponentで同様の動作を実現できます。

結論

Reactメモは、不必要な再レンダーを減らし、Reactアプリケーションのパフォーマンスを高めるための貴重なツールです。純粋な機能コンポーネントまたは静的UI要素でそれを選択的に使用することにより、その構造を複雑にすることなくReactアプリを最適化できます。これらの手順に従って、例を試して、プロジェクトに最適なメモ化戦略を見つけて実験を続けてください！