1日の中ですることが多くなってきて、一日24時間では足りなくなってきた今日この頃です。
前回の記事では、stateについて勉強できました。
本日は、
state を props として子コンポーネントに渡す
stateとpropsをどのように使うのか勉強しました。
stateを含むステートフルコンポーネントを用意し、それから子コンポーネントをレンダーしました。
そして、それらのコンポーネントから、propsとして渡されたstateの一部にアクセスするようにするようでした。
例としては、
たとえば
Appコンポーネントがあり、他のコンポーネントの中からNavbarをレンダーするとします。Appにはstateがあり、そこにはたくさんのユーザー情報が含まれていますが、Navbarではユーザーのユーザー名にアクセスして表示できれば十分です。 そこで、stateのうちその部分を prop としてNavbarコンポーネントに渡します。こうしたパターンは React での重要な決まりごとをいくつか示しています。 1 つ目は一方向のデータフローです。 state は、ステートフルな親コンポーネントから子コンポーネントに向かって、アプリケーションのコンポーネントツリーを一方向に流れます。 子コンポーネントでは必要な state データのみを受け取ります。 2 つ目は、複雑なステートフルアプリを、ほんの数個の、またはおそらく単一の、ステートフルコンポーネントに分割できることです。 残りのコンポーネントでは、単純に親コンポーネントから state を props として受け取り、その state から UI をレンダーします。 その結果、コードのある部分で state の管理を処理し、別の部分で UI のレンダーを処理するという、コードの分離ができ始めます。 state のロジックを UI のロジックから切り分けるというこの原則は、React の主要な原則の一つとなっています。 これを正しく適用すれば、複雑なステートフルアプリケーションの設計管理がずっと簡単になります。
https://www.freecodecamp.org/japanese/learn/front-end-development-libraries/react/pass-state-as-props-to-child-components
ステートフルコンポーネント：Reactコンポーネントの一種で、内部的に状態（ステート）を持つコンポーネント。ステートはコンポーネントのデータの状態を表し、コンポーネント内で変更されることがある。
下記のような課題がありました。
MyApp はステートフルコンポーネントで、Navbar コンポーネントを子としてレンダーします。 state の name プロパティを子コンポーネントに渡し、h1 タグに name を表示してください。これは Navbar の render メソッドの一部になります。 name をテキスト Hello, my name is: の後に表示してください。
解答としては、
Navbar コンポーネントで、MyApp の state プロパティ name を props として受け取って、Navbarのh1要素で、name propをレンダーするということでした。
コールバックを props として渡す
state を props として子コンポーネントに渡すことができましたが、渡せるのはデータだけではないようです。 ハンドラー関数や、React コンポーネントで定義されている任意のメソッドを、子コンポーネントに渡すこともできるようです。 この方法を使うことで、子コンポーネントがその親コンポーネントとやり取りできるようになります。 メソッドについても、通常の prop とまったく同様に子に渡すことができます。 メソッドには名前が割り当てられており、子コンポーネントの this.props の下でそのメソッド名にアクセスできました。
課題として下記のようなものがありました。
コードエディターに 3 つのコンポーネントの概略が記されています。 MyApp コンポーネントは、GetInput および RenderInput という子コンポーネントをレンダーする親コンポーネントです。 MyApp の render メソッドに GetInput コンポーネントを追加し、MyApp の state から inputValue に割り当てられた input という prop を渡してください。 また、handleChange という prop を作成して、それに入力ハンドラー handleChange を渡してください。
次に、MyApp の render メソッドに RenderInput を追加し、input という prop を作成して、state からの inputValue を渡してください。 記述を終えると、GetInput コンポーネントの input フィールドに入力できるようになり、その親のハンドラーメソッドが props 経由で呼び出されます。 これにより、親の state の入力が更新され、両方の子要素に props として渡されます。 コンポーネント間でのデータの流れと、単一の信頼できる情報源が引き続き親コンポーネントの state のままになっていることを確かめてください。 この例は少し不自然かもしれませんが、React コンポーネント間でデータやコールバックをどのように受け渡すことができるのかを理解するのに役立ちます。
解答が下記のようになります。
ライフサイクルメソッド componentWillMount を使用する
React コンポーネントには、コンポーネントのライフサイクル中に特定の時点でアクションを実行する機会を提供する、いくつかの特別なメソッドがあ流ようです。 これらはライフサイクルメソッドまたはライフサイクルフックと呼ばれ、特定の時点でコンポーネントをキャッチできるようです。 メソッドは、レンダー前、更新前、prop を受け取る前、アンマウント前などの時点で実行でき、 主なライフサイクルメソッドとしては、
componentWillMount()
componentDidMount()
shouldComponentUpdate()
componentDidUpdate()
componentWillUnmount()
があるようです。
※componentWillMount は、将来のバージョン 16.X で非推奨になり、バージョン 17 で削除される予定のようです。
ライフサイクルメソッド ：Reactコンポーネントのさまざまなステージで自動的に呼び出される特殊なメソッド。これらのメソッドを使用することで、コンポーネントの作成、更新、破棄などの異なる段階で特定のコードを実行することが可能。
ライフサイクルメソッド componentDidMount を使用する
Web開発では、データを取得するためにAPIエンドポイントを呼び出す必要があるようです。
React では、API の呼び出しやサーバーへの呼び出しをライフサイクルメソッド componentDidMount() に配置するようです。
このメソッドは、コンポーネントが DOM にマウントされた後に呼び出されます。 この中で setState() を呼び出すと、そのたびにコンポーネントの再レンダーがトリガーされます。 このメソッドで API を呼び出して、API が返すデータを使用して state を設定すると、データの受信後に自動的に更新がトリガーされます。
APIエンドポイント : APIエンドポイントは、Webアプリケーションやサービスから提供されるAPI（Application Programming Interface）のアクセスポイントです。APIエンドポイントは、クライアントが要求を送信し、サーバーが応答を返すための特定のURL（Uniform Resource Locator）。
マウント : マウント（Mount）は、Reactや他のフロントエンドフレームワークにおいて、コンポーネントがDOMに追加されるプロセスを指す。コンポーネントがマウントされると、それが表示されるために必要な要素やイベントリスナーがDOMに追加される。
課題として下記をやりました。
componentDidMount() に模擬的な API 呼び出しがあります。 この呼び出しは、2.5 秒後にサーバーの呼び出しをシミュレートしてデータを取得するように state を設定します。 この例では、サイトの現在のアクティブユーザーの合計数を要求します。 render メソッドで、activeUsers の値を h1 のテキスト Active Users: の後にレンダーしてください。 プレビューで何が起きるかを確認し、タイムアウトを自由に変更してさまざまな効果を表示してください。
解答として
shouldComponentUpdate で再レンダーを最適化する
React では、子コンポーネントが新しい state または props を受け取ったときに呼び出すことができるライフサイクルメソッドが用意されていて、コンポーネントを更新する必要があるかどうかを具体的に宣言することができるようです。 これは shouldComponentUpdate() というメソッドで、パラメーターとして nextProps と nextState を受け取るようです。
例として、
新しい props を受け取ると、たとえその props が変更されていなくてもコンポーネントが再レンダーされるようです。 shouldComponentUpdate() を使用して props を比較することで、この動作を回避することができ、 メソッドからは、コンポーネントの更新が必要かどうかを React に伝える boolean 値を返す必要があります。 現在の props (this.props) を次の props (nextProps) と比較して、更新する必要があるかどうかを判断し、それに応じて true または false を返すことができます。
下記が課題になります。
shouldComponentUpdate() メソッドが OnlyEvens というコンポーネントに追加されています。 現在、このメソッドは true を返すため、OnlyEvens は新しい props を受け取るたびに再レンダーされます。 メソッドを変更して、新しい props の value が偶数の場合にのみ OnlyEvens を更新するようにしてください。 Add ボタンをクリックして、ライフサイクルフックがトリガーされるときにブラウザーのコンソールでイベントの順序を確認してください。
インラインスタイルを導入する
HTMLでインラインスタイルを使用する場合は、
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>でしたが、
JSXでインラインスタイルを使用する方法は、
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>となるようです。
fontSizeプロパティがキャメルケースになっています。
理由としては、
React はスタイルオブジェクトでケバブケースのキーを受け付けないためです。 React によって正しいプロパティ名が HTML に適用されます。
https://www.freecodecamp.org/japanese/learn/front-end-development-libraries/react/introducing-inline-styles
とのことでした。
React にインラインスタイルを追加する
スタイルセットがたくさんある場合、定数にオブジェクトを割り当てることでコードを整理することができます。
下記が課題になります。
ファイルの先頭で、styles 定数をグローバル変数として宣言してください。 styles 定数を初期化し、3 つのスタイルプロパティとそれらの値を持つ object を割り当ててください。 div の color を purple に、font-size を 40 に、border を 2px solid purple に設定してください。 そして、style 属性を styles 定数と等しく設定してください。
解答としては、下記のようになりました。
今回学んだこととして、
- stateをpropsとして子コンポーネントに渡す方法
stateのnameプロパティを子コンポーネントに渡す方法 - コールバックをpropsとして渡す方法
- ライフサイクルメソッド componentWillMount の使用方法 (React バージョン 17 で削除)
- ライフサイクルメソッド componentDidMount の使用方法 (最近ではフックが使われる)
- shouldComponentUpdate で再レンダーを最適化する方法 (最近ではフックが使われる)
- インラインスタイルを導入方法
- React にインラインスタイルを追加する方法
React17,18くらいから、ライフサイクルメソッドが使われなくなってきて、フックが使われるようになっているようでした。フックについても少しずつ勉強しています。
フックや、関数コンポーネント、TypeScriptでの型宣言など、試してみたい技術が多くなってきて楽しみです。
今日はここまでです〜。
