こんにちは、ともです。

React.jsのチュートリアルを進めていまして、リストとキーを勉強中です。

React.jsにおけるkeyについての理解をまとめたいと思います。

参考にしたものは下記です。

• React.jsドキュメント
• React開発 現場の教科書

要素のリスト

要素をリストにまとめることができます。

function Lists () {
            return (
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>bird</li>
                </ul>
            )
        }

        ReactDOM.render(
            <Lists/>,
            document.getElementById('root')
        )

このような動物のリストを表示するListsコンポーネントがあったとします。

<li>cat</li>
<li>dog</li>
<li>bird</li>

と書いても構いませんが、要素のリストとして次のようにまとめることができます。

function Lists () {
            const animals = ['cat', 'dog', 'bird']
            let animalsLists = animals.map((animal) => {
                return <List value={animal} />
            })

            return (
                <ul>
                    {animalsLists}
                </ul>
            )
}

このようにReact要素をArrayにまとめ、{animalsLists}のように利用することができます。

ここでkeyを利用しないと次のような警告を受けます。

listはユニークなkeyを持つべきだと書いています。

keyとは

keyを知らなくても目的のUIは作成可能ですが、きちんとしたReactコンポーネントを作成するためには必要です。

Reactチュートリアルのドキュメントには次のように記述されています。

Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます。配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべきです。

ReactにはPropsやStateをコントロールすれば、実際の表示要素の差分を再描画する機能がライブラリとして備わっています。keyは再描画の際の描画処理の無駄を最小限にとどめてパフォーマンスが低下することにあります。

<ul>
         + <li>lion</li>
        <li>cat</li>
        <li>dog</li>
        <li>bird</li>
</ul>

cat・dog・birdの３つの<li>要素があり、先頭にlionを持つ<li>要素が追加されたとします。

この場合、catは先頭から1番目、dogは先頭から2番目、birdは先頭から3番目、そしてlionは先頭から0番目となり、データを１つ追加しただけにも関わらずDOMの兄弟要素のデータが全て変更されてしまいます。

つまりReactが再描画すべき対象が拡大します。

keyとは効率的なコンポーネントの描画のための目印の役割をしています。

let animalsLists = animals.map((animal, index) => {
                return <List key={index} value={animal} />
})

このようにユニークな番号をkeyに付与しました。これで先ほどの警告は出なくなります。

まとめ

React.jsのチュートリアルをみながらkeyやリストについての記事を書きました。

リストやkeyを利用することで簡潔に記述することができますね。どんどん利用していきたいです。