電子文書(法令、タイムビジネス関連制度)2019-12-27Reactの5thステップ2019-12-20WWWブラウザの[×]ボタンのイベントをハンドルする。.NET開発基盤部会」によって運営されています。Application開発用のUIサブシステム。仕組みコンポーネント指向に基づいて効率的にSPAを開発できる。JSX(*.jsx、*.tsx)で作成され、Node.js開発環境でコンパイルされて*.jsを得る。下記の特徴を見ると、JSのMV*もXAML的になったなぁという感覚がある。IDEが良くならないとエンプラの要求する生産性にまで上がらなさそうではある。エコシステムReactNativeに関しては、Microsoft社が力を入れているように見える。Code」に変更するなど。†Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築する。コンポーネントのインスタンスのことを「エレメント」と言う。設計と速度が両立すると言われている。仮想DOMの構造体表現と、それを用いたdiff/patchアルゴリズム。最終的に生成されるHTMLの複雑なDOMではなく、仮想的なDOMを記述する。2つのツリー構造のdiffを算出して、それをDOMにpatchするアクションを作る。UI要素へと、一方向化している。詳しくは、Fluxを参照。†HTML再描画が、Ajaxによって部分描画のDOM操作になり、HTML/JavaScriptにはイベントドリブンの仕掛けが整っている。Fiberあたりの仕組みである。...と言う事だろうか。仮想DOMを更新してUIに反映するアルゴリズムをリコンシリエーション(reconciliation)と言う。以前は、仮想DOMのツリーを上から再帰的に比較していくという処理だった。Fiberでは再帰的な処理をやめて、ReactElement?ごとの更新処理を連結リストにして、一つ一つの更新処理を独立したものとして扱えるようにした。同期的な再帰処理を、停止・再開可能な非同期処理(Fiber)に分割した。Wikipedia」のこと。†JSXをサポートする言語を使用する。「Babel」(ECMAScript)を導入する方法が最も簡単。プログラム・ファイルの拡張子は、*.jsx。†また、「TypeScript」でもサポートされている(TSX)。プログラム・ファイルの拡張子は、*.tsx。要素作成する仮想DOMを、簡便な形式でXMLマークアップのシンタックスを追加する。拡張属性で、HTMLタグとJSXタグが共存する。制御構文とXMLマークアップが混在するという意味で、Razor的。基本的に以下のように書く。onClick={()=>this.renderChange()}>切替</button>以下は問題がある。レンダリング時にclickActionが起動してしまう。onClick={this.clickAction()}>thisにアクセスできない。自由に属性を設定可能。/></div>子コンポーネントからprops.(定義した属性名)と利用。†React自信にデザインの機能はないのでCSSを利用する。JS」と言われる考え方が登場し、React用のCSSをインポート可能になっている。classはclassNameと書く。styleはstyleで良い。†JSXタグでコンポーネントを設置タグ名=コンポーネントクラス名のJSXタグは頭文字を大文字になる。propsを使用する場合、React.Componentを継承する。†モジュール化することによってインポート可能なクラスにする。†exportでモジュール化したクラスは、importでインポートが可能。'./SubComponent';nクラス、インポート(1ファイルに複数定義されている場合。†コンポーネントの状態を表す変数。コードからReact.Componentのプロパティと思われる。this.setStateで設定し、this.stateで参照する。†データ(state)を親コンポーネントから子コンポーネントに渡す際に使用する。変更不可と書かれていることがあるが変更通知を使用すれば変更可能。コードからReact.Componentのプロパティと思われる。context)}constructorの記述自体を丸々省略できる。生成したいHTML(正確にはJSX)を書く。直下は1つのエレメントしか置けない。繰り返し処理map内にラムダ式を書く。)})コンポーネントの再描画stateを更新して、コンポーネントを再描画する。イベントなどで、上記のthis.stateを変更するとHTMLが再描画される。†Componentの状態の変化に合わせて色々メソッドを呼んでくれる。それに合わせて初期化や後始末な処理を書くことが出来る。ComponentがDOMツリーに追加される前に一度だけ呼ばれる。rendering時にも呼ばれる。†DOMに関わる初期化処理を行う。ComponentがDOMツリーに追加された状態で呼ばれる。renderingの時には呼ばれない。†propsが更新される時に呼ばれる。Componentが新しくDOMツリーに追加される時には呼ばれない。Notification(変更通知)的に使う。親Componentのstateがpropsとして渡されていて、その値が変化した時に何かしたいときに使用する。setStateすると、描画もされる。†Componentがrerenderされる前に呼ばれる。Performanceの向上を目的に実装する。trueを返すとVirtualDOMの比較を行いrerenderされる。falseを返すとVirtualDOMの比較を行わずにrerenderもされなくなります。†Component更新前に呼ばれる(初回時には呼ばれない)。componentWillReceiveProps)。†Component更新後に呼ばれる(初回時には呼ばれない)。DOMの変化にフックして何かしたい場合に使う。†ComponentがDOMから削除される時に呼ばれる。イベントの解除などクリーンアップ処理に使用する。見た目を担当するコンポーネント独自のマークアップとスタイルを持つ。アクションやストアの部分は分離される。多くの場合this.props.childrenとして他に内包され、propsとしてデータとコールバックを受け取れる。稀に独自のstateを持つ。(それはデータではなくUIの状態として持つ。)SFCとして記述できる場合は、SFCとして記述する。†ロジック(物事の振る舞い)に関与するコンポーネント通常、ラッピングのdivを除いてDOMマークアップ、スタイルを持たない。Componentや、その他のコンポーネントにデータと振る舞いを提供する。Componentに渡す。componentsstateを自身で持たないシンプルなコンポーネントの場合、React.Componentを継承したクラスの定義は不要。以下が不要な場合は、SFCとしてComponentを定義可能。定義{this.props.children}で子を描画。}}利用TemplateComponent?にChildComponent?を指定。同一コンポーネントのインスタンスを識別する。子側で(利用を)定義this.props.XXXX親側でデータを指定。親コンポーネントが保持しているデータを全て子コンポーネントのpropsに渡す。子側の定義は不要で、以下のように利用可能。親側でスプレッド演算子によりデータを指定。親側は、this.stateを子のpropsにバインドしておき、setStateでstateの変更を反映する。子側は、コンポーネントが変更された、新しいpropsを受け取ると、componentWillReceivePropsが変更通知として実行される。propsの更新をsetStateで反映する。子からハンドラを呼び出す(引数指定可能)。その後、必要に応じて、「親から子」のデータ連携を行う。†BootstrapをReactから使いやすくしたライブラリ。インストールと、CSS自体の読み込みが必要。†マテリアルデザインをReact.jsで実現するライブラリ。Bootstrapと提供機能はほとんど同じ。†Reactコンポーネントが状態を失うことなく、ライブで再ロードされるようにするプラグイン。高機能テーブルコンポーネント(ソートやフィルタリング、ページジング)。†1つのタグにまとめるルートのタグとして使用できる。Fragmentタグ自体はレンダリングされない。配列も返すことが出来る(ただし、keyが必要)。†ref属性を定義した要素のRefsを取得する方法の一つ。RefsによりDOMやReactコンポーネントへのアクセスが可能となる。createRef以外にもcallbackによる取得も可能。drilling)問題を解決する。react-reduxのProviderとほぼ同様の機能ProviderとConsumerというComponentを使う。ProviderでwrapしたComponent以下はConsumer経由でいつでもProviderに設定されたパラメータをpropsで参照できる。†React.Timeoutだったり、React.Placeholderだったりしたもの。子コンポーネントのレンダリングを中断し、Promiseの完了時にレンダリングを再実行する。†FCでshouldComponentUpdate相当のことができる。v16.3以降、ライフサイクルメソッドのcomponentWillMountcomponentWillReceivePropscomponentWillUpdatedeprecated(非推奨)のため、代用が必要。†this.props.childrenの評価時に発生したエラーを親コンポーネントのcomponentDidCatch?で取得できる。React.Suspenseで利用されている機構。