記法もキャメルケースにする必要があります。上で単純なクラス名でも安心して使えるようになります。定義されたコンポーネントのみの構成になるまで呼び出しを繰り返すことで、ツリーを形成します。比べると生成コストは低く済みます。ツリー)にマッピングすることで描画します。ツリーを比較して、変更があった箇所のみをホストツリーに反映します。コンポーネントを新たに作成します。前回と同じ内容のため、ホストへのマッピングの際に、既存のノードには更新がかかりません。更新するか差し替えるかは、子要素を順番に見ていき判断します。場合は、空のコンポーネントを表します。することで、子のコンポーネントの並びを維持します。なくなったことを伝えられます。削除、というような状況となります。コンポーネントの子要素の数は、変わらないようにすることが必要です。コンポーネントの数が変わってしまいます。配列の先頭を削除すると、以降の要素が繰り上がり、すべての配列のコンポーネントが更新の対象となります。いう属性でユニークな値を付与します。レコードがなくなっただけと認識できるので、ホストツリー上での削除対象のノードが消されるだけで済みます。内容が違うコンポーネントができてしまいます。結果、ホストツリーのすべてのお知らせのノードが更新の対象になり、最後のレコードが削除されることになります。まとめ最近、いろいろな所で「宣言的であること」が重要視されています。使ってイチからイメージを作成すれば、更新にまつわる冪等性の複雑さを考える必要がありません。裏側でキャッシュしているため、次回以降は変更した部分以外はキャッシュを使えます。これにより、新規でも更新と変わらないくらい素早くイメージを作成できます。処理だけ呼び出してくれます。前回のツリーと変更があった箇所だけをホストツリーに反映するため、描画の更新が遅くなることがありません。呼び出しなどは、そのまま書くと命令的になってしまう処理も存在します。使うことで回避できるのですが、これはまた別の機会に書きたいと思います。魅力をお届けしています。日本最大級の家計簿サービス「Zaim」をwww.wantedly.comダウンロード#フロントエンド#react#storybook#jsxこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。