React（+TypeScript）入門 | Listを扱う

Reactでデータ集合に対してリスト表示する方法をまとめます。

List

データとしてarrayを考え、それをリスト表示します。
map()を用いてarrayの要素を<li>に射影する、が基本方針です。

import * as React from 'react';

const NameList = (props) => {
    const listItems = props.names.map(name => 
        <li>{name}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
};

export default NameList;

import * as React from 'react';
import NameList from './components/NameList';

class App extends React.Component {
  render() {
    const names = ['Alice', 'Bob', 'Carol'];
    return (
      <div>
        <NameList names={names}/>
      </div>
    );
  }
}

export default App;

表示だけならばこれで動くには動くのですが、コンパイル時に警告が出るはずです。
実はこれでは不十分で次に述べるkeyというものが重要になります。

key

さっそくですが上のNameListコンポーネントを次のように直します。

const NameList = (props) => {
    const listItems = props.names.map((name, index) => 
        <li key={index}>{name}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
};

keyという属性をliに付与し、今回はインデックスの値を渡しています。

ReactのメリットはVirtualDOMによる差分更新です。配列の要素の変更、追加、削除があったとき、keyという識別子をつけることで必要最小限の更新で済むようにしたいのです。パフォーマンスのためにkeyは必ずつけます。

keyは基本的にユニークな文字列である必要があります。

要素オブジェクトがidをもっていればシンプルにそれを使い、idがない場合は上記のように配列インデックスを用いる手があります。ただし、並び替えがあり得る場合インデックスを使うとパフォーマンスが下がるので注意です。

ちなみにkeyはVirtualDOM上で用いられるだけで、実際のDOMに反映はされません。