【React】浅い比較とは？メリットと注意点、shouldComponentUpdateとの違いまで完全網羅
Reactにおける浅い比較（Shallow Compare) の仕組みと詳細解説
Reactにおいて、パフォーマンスを最適化するために重要な概念の一つが「浅い比較（Shallow Compare）」です。これは、コンポーネントの再レンダリングが必要かどうかを判断するために用いられる手法で、効率的なデータ更新を実現します。
本記事では、浅い比較の仕組みと詳細について、分かりやすく解説します。
浅い比較とは？
浅い比較は、2つのオブジェクトまたは配列が同じメモリ位置を指しているかどうかを比較するものです。つまり、オブジェクトや配列の内容そのものではなく、参照を比較します。
例えば、以下のコードを見てみましょう。
const obj1 = { name: 'Taro', age: 30 };
const obj2 = obj1;
console.log(obj1 === obj2); // true
このコードでは、obj1とobj2は同じメモリ位置を指しているため、浅い比較ではtrueとなります。一方、以下のコードでは、obj3はobj1のコピーを作成しているため、浅い比較ではfalseとなります。
const obj3 = { ...obj1 };
console.log(obj1 === obj3); // false
Reactにおける浅い比較
Reactでは、コンポーネントのpropsやstateの更新を検知するために浅い比較が用いられます。具体的には、以下の2つのタイミングで浅い比較が行われます。
- コンポーネントの再レンダリングが必要かどうかを判断する
コンポーネントに新しい
propsが渡されたとき、Reactは古いpropsと新しいpropsを浅く比較します。もし違いがあれば、コンポーネントは再レンダリングされます。 - コンポーネントのshouldComponentUpdateメソッドを実行する
コンポーネントに
shouldComponentUpdateメソッドが定義されている場合、Reactはこのメソッドを呼び出して、コンポーネントが再レンダリングされるべきかどうかを判断します。このメソッド内部で、浅い比較を用いてpropsやstateの変化を確認することができます。
浅い比較の利点
浅い比較は、深い比較と比べて処理速度が速いため、パフォーマンスを向上させることができます。これは、オブジェクトや配列の内容をすべて比較する必要がないためです。
また、浅い比較は、不要な再レンダリングを防ぐのにも役立ちます。例えば、propsの一部のみが変更された場合でも、浅い比較によって全体が変更されていないことが分かれば、コンポーネントは再レンダリングされません。
浅い比較は、オブジェクトや配列の内容そのものではなく、参照を比較することに注意する必要があります。そのため、以下の場合は、浅い比較では違いが検知されない可能性があります。
- オブジェクトのコピーを作成した場合
- オブジェクトのプロパティの値を変更した場合（参照は同じままである）
このような場合は、深い比較を用いるか、shouldComponentUpdateメソッドで独自の比較ロジックを実装する必要があります。
浅い比較は、Reactにおける重要なパフォーマンス最適化手法の一つです。仕組みを理解し、適切な場面で使用することで、アプリケーションのパフォーマンスを向上させることができます。
- 本記事は、あくまでも概要説明であり、詳細な技術仕様については、公式ドキュメント等を参照することを推奨します。
浅い比較を用いたサンプルコード
例1：コンポーネントの再レンダリング
以下のコードは、countプロパティを持つCounterコンポーネントと、そのコンポーネントを呼び出す親コンポーネントを示しています。
// Counter.js
import React from 'react';
function Counter(props) {
const { count } = props;
return <div>カウント： {count}</div>;
}
export default Counter;
// App.js
import React, { useState } from 'react';
import Counter from './Counter';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<Counter count={count} />
<button onClick={() => setCount(count + 1)}>カウントアップ</button>
</div>
);
}
export default App;
このコードを実行すると、Counterコンポーネントは最初にcount: 0とレンダリングされます。その後、カウントアップボタンをクリックすると、setCount関数が呼び出され、countプロパティの値が1増えます。
Reactはcountプロパティの更新を検知し、Counterコンポーネントを再レンダリングします。このとき、Reactは古いcountプロパティと新しいcountプロパティを浅く比較し、違いがあることを確認するため、再レンダリングが行われます。
例2：shouldComponentUpdateメソッド
以下のコードは、shouldComponentUpdateメソッドを用いて、Counterコンポーネントの再レンダリングを制御する例です。
// Counter.js
import React from 'react';
function Counter(props) {
const { count } = props;
return <div>カウント： {count}</div>;
}
Counter.prototype.shouldComponentUpdate = function(nextProps) {
return this.props.count !== nextProps.count;
};
export default Counter;
このコードでは、shouldComponentUpdateメソッド内で、古いcountプロパティと新しいcountプロパティを浅く比較しています。もし違いがあれば、trueを返し、コンポーネントは再レンダリングされます。一方、違いがない場合はfalseを返し、コンポーネントは再レンダリングされません。
この例では、countプロパティのみが変更された場合のみ、コンポーネントが再レンダリングされるように制御されています。
上記2つの例は、浅い比較をどのように利用できるかの簡単な例です。実際の開発においては、状況に応じて適切な方法を選択する必要があります。
浅い比較の代替方法
浅い比較は、パフォーマンスを向上させるために役立つ手法ですが、いくつかの注意点があります。
- オブジェクトのコピーを作成した場合や、オブジェクトのプロパティの値を変更した場合（参照は同じままである）は、浅い比較では違いが検知されない可能性があります。
- 浅い比較は、オブジェクトや配列の内容そのものではなく、参照を比較することに注意する必要があります。
このような場合、浅い比較の代替方法として、以下の方法が考えられます。
深い比較は、オブジェクトや配列の内容を再帰的に比較する方法です。浅い比較よりも処理速度が遅いですが、オブジェクトや配列の内容が変更されたかどうかを正確に判断することができます。
function deepEqual(obj1, obj2) {
if (obj1 === obj2) {
return true;
}
if (obj1 === null || typeof obj1 !== 'object' || obj2 === null || typeof obj2 !== 'object') {
return false;
}
const keysA = Object.keys(obj1);
const keysB = Object.keys(obj2);
if (keysA.length !== keysB.length) {
return false;
}
for (let key of keysA) {
if (!keysB.includes(key)) {
return false;
}
if (!deepEqual(obj1[key], obj2[key])) {
return false;
}
}
return true;
}
Immutable.jsは、JavaScriptで不変データ構造を扱うためのライブラリです。Immutable.jsを用いることで、オブジェクトや配列を不変にすることができ、浅い比較や深い比較を行うことなく、オブジェクトや配列の変化を検知することができます。
import { Map, List } from 'immutable';
const oldState = Map({ count: 0 });
const newState = oldState.set('count', 1);
console.log(oldState === newState); // false
自身の比較ロジックを実装する
状況に応じて、独自の比較ロジックを実装することも可能です。例えば、オブジェクトのプロパティの一部のみを比較したい場合や、特定の条件に基づいて比較したい場合などに有効です。
浅い比較は、パフォーマンスを向上させるために役立つ手法ですが、万能ではありません。状況に応じて、適切な代替方法を選択する必要があります。
javascript reactjs
