React — 00 Reactの基本用語

Reactを読むとき最初に出会う言葉を短く整理する。JSX、Props、イベント処理、Stateを別々に暗記する代わりに、「データを受け取って画面を計算し、出来事が起きたら状態を変えて再計算する」という一つの流れでつなぐ。

§ 00 · Reactとコンポーネント

Reactはユーザーインターフェースを作るJavaScriptライブラリだ。新しいプログラミング言語ではなく、画面を小さく再利用可能なコンポーネントに分け、それらを組み合わせる方法を提供する。ボタンのように小さな部品も、ページのように大きな部品もコンポーネントにできる。

関数コンポーネントはProps・State・Contextなどの入力を読み、画面の次の姿を返す。入力が変わるとReactはコンポーネントを再び呼び出して新しい画面を計算し（render）、実際のDOMに必要な差分だけを反映する（commit）。したがってレンダリングのコードは、同じ入力に同じ結果を返す純粋な計算でなければならない。

§ 01 · JSX — JavaScriptの中で画面を記述する構文

JSXは、JavaScriptファイル内にHTMLに似たマークアップを書ける構文拡張だ。JSXそのものはReactでもHTMLでもない。ビルド時にJavaScriptへ変換され、中括弧の中にはJavaScriptの式を書ける。

HTMLより厳格だ。タグを閉じる必要があり、複数の兄弟要素を返す場合は一つの親要素かFragmentで包み、独自コンポーネント名は大文字で始める。classの代わりにclassNameを使うなど、ブラウザのDOM属性と名前が違う項目もある。

§ 02 · Props — 親から子へ渡す入力

Propsは親コンポーネントから子コンポーネントへ渡す値だ。文字列だけでなく、数値、オブジェクト、配列、関数、JSXも渡せる。子は受け取ったPropsを、そのレンダーの読み取り専用入力として扱う。変えたい場合は、親から新しいPropsを渡す必要がある。

§ 03 · イベントとState — 行動を次の画面につなげる

イベントハンドラは、クリック、入力、送信など利用者の行動に反応する関数だ。onClick={handleClick}のように関数を渡す。onClick={handleClick()}のように呼び出し結果を渡すと、クリックを待たずレンダリング中に直ちに実行される。

Stateは、コンポーネントがレンダーをまたいで記憶し、画面にも影響するデータだ。useStateは現在の値と、それを更新するsetterを返す。setterは今実行中の変数自体を変えるのではなく、次のレンダーを要求する。オブジェクトや配列のStateは直接変更せず、新しい値に置き換える。

§ 04 · 組み合わせて画面を作る

childrenは、コンポーネントの開始タグと終了タグの間に置いた内容を受け取る特別なPropだ。箱、ダイアログ、レイアウトのように中身を差し替えるコンポーネントに使う。継承よりも、小さなコンポーネントを組み合わせるのがReactの基本だ。

条件に応じて異なるJSXを返すにはif、三項演算子、&&を使う。配列はmapでJSXのリストに変換できる。その際、兄弟項目それぞれに安定した一意のkeyを付ければ、追加・削除・移動の後もReactが同じ項目を識別できる。配列のインデックスやレンダーごとに変わるランダム値は、よいkeyではない。

記事を読む: sass.studio.