React
https://gyazo.com/d7c76e21c9b8d8ba8ff5771b0b00d9f4
概要
現在はclassコンポーネントではなく関数コンポーネントを使うべき
データ更新に伴って再レンダリングを実行するモデルこそがReactの根幹
メモ
React要素
DOMタグ、ユーザー定義コンポーネント
JSXはReact.createElement糖衣構文
要素(element)が最小単位であり、コンポーネントは要素とロジックとをまとめたもの
React要素はイミュータブル
ブラウザの DOM 要素とは異なり、React 要素はプレーンなオブジェクトであり、安価に作成できます。React DOM が React 要素に合致するように DOM を更新する作業を担当します。
この中にあるもの全てが React DOM によって管理されることになるので、“ルート” DOM ノードと呼ぶことにしましょう。
React だけで構築されたアプリケーションは、通常ルート DOM ノードをひとつだけ持ちます。既存のアプリに React を統合しようとしている場合は、独立したルート DOM ノードを好きなだけ持つことができます。
コンポーネントが使用される文脈ではなく、コンポーネント自身からの観点で props の名前を付ける
コンポーネントが props を UI に変換するのに対して、高階コンポーネントはコンポーネントを別のコンポーネントに変換します
state
このデータフローは一般的には “トップダウン” もしくは “単一方向” データフローと呼ばれます。いかなる state も必ず特定のコンポーネントが所有し、state から生ずる全てのデータまたは UI は、ツリーでそれらの “下” にいるコンポーネントにのみ影響します。
コンポーネントツリーとは props が流れ落ちる滝なのだと想像すると、各コンポーネントの state とは任意の場所で合流してくる追加の水源であり、それらもまた下に流れ落ちていくものなのです。
イベントでのコールバック関数のバインド
JSX のコールバックにおける this の意味に注意しなければなりません。JavaScript では、クラスのメソッドはデフォルトではバインドされません。this.handleClick へのバインドを忘れて onClick に渡した場合、実際に関数が呼ばれた時に this は undefined となってしまいます。
コンポーネントの階層構造
コンポーネントでのモデリング
どのコンポーネントで状態を持つのが適切なのか
ハンドル関数をどのコンポーネントで持つのが適切なのか
リストの状態変更の把握のためにリストのアイテムにはユニークなキーが必要
Reactはリストのどのアイテムが変更されたのか知る必要がある
リストの変更シナリオ
リストに要素が追加
リストから要素が削除
リストの要素が並び替えられた
リストの要素の中身が更新された
key はそれぞれのコンポーネントの同一性に関する情報を React に与え、それにより React は再レンダー間で state を保持できるようになります。もしコンポーネントの key が変化していれば、コンポーネントは破棄されて新しい state で再作成されます。
React はどの子要素を更新すべきかを決定する際に、key を自動的に使用します。コンポーネントが自身の key について確認する方法はありません。
状態のリフトアップ
コントロールドコンポーネント
コンストラクターの削除
関数コンポーネント
関数コンポーネント時代におけるReactの特徴は、コンポーネントの実体（インスタンス）が我々から見えないところで管理されているということです。クラスコンポーネントの場合はクラスのインスタンスがコンポーネントの実体として、そのコンポーネントのライフサイクルの間生存しており、我々はthisなどを通じてそれに触れることができました。一方、関数コンポーネントの場合はその実体に直接触れることはできず、useStateやuseRefなどのフックを用いることで、その実体が持つ記憶領域に断片的なアクセスをすることができます。これが、関数コンポーネントがレンダリングされるたびに呼び出されるにもかかわらずコンポーネントがステートなどを持つことができるからくりです。
このように、フックはコンポーネントの実体とコンポーネントのコードの間に抽象化レイヤーを挟むためのAPIだと見ることができます。その利点はより高い凝集度のロジックを書けることです。
以上のことから、Reactは「関数ひとつでロジックを全部書けて、JavaScriptのフルパワーを使うことができる」点が特徴であり、筆者がReactが好きな理由です。
学習資料