「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
Facebook社が開発しているSingle Page Application開発用のUIサブシステム。
仕組み †
- JSX（*.jsx、*.tsx）で作成され、Node.js開発環境でコンパイルされて*.jsを得る。
生産性 †
- 下記の特徴を見ると、JSのMV*もXAML的になったなぁという感覚がある。
- ただ、IDEが良くならないとエンプラの要求する生産性にまで上がらなさそうではある。
エコシステム †
- また、Facebookが社内の標準開発環境を「Visual Studio Code」に変更するなど。
特徴 †
Just the UI †
コンポーネント指向 †
- Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築する。
- なお、コンポーネントのインスタンスのことを「エレメント」と言う。
仮想DOM †
- 仮想DOMの構造体表現と、それを用いたdiff/patchアルゴリズム。
- 最終的に生成されるHTMLの複雑なDOMではなく、仮想的なDOMを記述する。
- 2つのツリー構造のdiffを算出して、それをDOMにpatchするアクションを作る。
Data flow †
と、一方向化している。
自分の言葉で言うと、 †
経緯 †
- HTML再描画が、Ajaxによって部分描画のDOM操作になり、
- この土台の上で、リッチなUIサブシステムを実現しようとしたら、
- DOM操作のビルティング・ブロック化が目標になり、
...と言う事だろうか。
React Fiber †
- 仮想DOMを更新してUIに反映するアルゴリズムをリコンシリエーション（reconciliation）と言う。
- 以前は、仮想DOMのツリーを上から再帰的に比較していくという処理だった。
- Fiberでは再帰的な処理をやめて、ReactElement?ごとの更新処理を
連結リストにして、一つ一つの更新処理を独立したものとして扱えるようにした。
- 同期的な再帰処理を、停止・再開可能な非同期処理（Fiber）に分割した。
- Fiberのスケジューリングが可能になった（インクリメンタルレンダリング）
※ そもそもFiberとは「ファイバー (コンピュータ) - Wikipedia」のこと。
基本的な事項 †
言語 †
JSXをサポートする言語を使用する。
- また、「TypeScript」でもサポートされている（TSX）。
- プログラム・ファイルの拡張子は、*.tsx。
JSX †
画面定義のマークアップ言語
特徴 †
JSの拡張言語で、
- React 要素作成する仮想DOMを、簡便な形式でXMLマークアップのシンタックスを追加する。
- XMLマークアップには、標準のHTML5 + 拡張属性で、HTMLタグとJSXタグが共存する。
- 制御構文とXMLマークアップが混在するという意味で、Razor的。
変数出力 †
{変数名}でJavaScript変数を出力
イベント・ハンドラ †
属性の指定 †
自由に属性を設定可能。
<div>
<MyComponent
myTitle={'タイトル'}
myValue={this.state.value} />
</div>
子コンポーネントからprops.(定義した属性名)と利用。
Css in JS †
- React自信にデザインの機能はないのでCSSを利用する。
- 「Css in JS」と言われる考え方が登場し、
React用のCSSをインポート可能になっている。
コンポーネントの配置 †
JSXタグでコンポーネントを設置
- タグ名＝コンポーネントクラス名の
- JSXタグは頭文字を大文字になる。
<MyComponent />
コンポーネントのネスト †
コンポーネントのRender内に、子コンポーネントを記述
<SubComponent />
基本形のコンポーネント †
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
constructor(props, context){
super(props, context)
this.state = { viewText : 'テストページ' }
}
render(){
return (
<div>
<h1>Hello! World.</h1>
<p>このページは{ this.state.viewText }です。</p>
</div>
)
}
}
extends †
state, propsを使用する場合、React.Componentを継承する。
export †
import †
exportでモジュール化したクラスは、importでインポートが可能。
state †
- コンポーネントの状態を表す変数。
- コードからReact.Componentのプロパティと思われる。
- this.setStateで設定し、this.stateで参照する。
props †
- データ（state）を親コンポーネントから子コンポーネントに渡す際に使用する。
- 変更不可と書かれていることがあるが変更通知を使用すれば変更可能。
- コードからReact.Componentのプロパティと思われる。
constructor †
- stateあり
constructor(props, context) {
super(props, context)
this.state = {
viewText: props.text,
viewFlg: props.defaultFlg,
}
}
constructorの記述自体を丸々省略できる。
render †
- 生成したいHTML（正確にはJSX）を書く。
- return( の直下は1つのエレメントしか置けない。
- コンポーネントの再描画
- stateを更新して、コンポーネントを再描画する。
- イベントなどで、上記のthis.stateを変更するとHTMLが再描画される。
class MyComponent extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
viewText: props.text,
viewFlg: props.defaultFlg,
}
}
renderChange() {
// viewFlgの状態を切替(0 <-> 1)
let newFlg = this.state.viewFlg == 1 ? 0 : 1;
this.setState({ viewFlg: newFlg });
}
render() {
return (
<div>
<h1>Hello! World.</h1>
<LeadText viewText={this.state.viewText} viewFlg={this.state.viewFlg} />
<button onClick={()=>this.renderChange()}>切替</button>
</div>
)
}
}
コンポーネント・ライフサイクル †
- Componentの状態の変化に合わせて色々メソッドを呼んでくれる。
- それに合わせて初期化や後始末な処理を書くことが出来る。
componentWillMount? †
- 初期化処理を行う。
- ComponentがDOMツリーに追加される前に一度だけ呼ばれる。
- server-side rendering時にも呼ばれる。
※ v16.3以降、deprecated（非推奨）
componentDidMount? †
- DOMに関わる初期化処理を行う。
- ComponentがDOMツリーに追加された状態で呼ばれる。
- server-side renderingの時には呼ばれない。
componentWillReceiveProps? †
- propsが更新される時に呼ばれる。
- Componentが新しくDOMツリーに追加される時には呼ばれない。
- 主に、Notification（変更通知）的に使う。
※ v16.3以降、deprecated（非推奨）
shouldComponentUpdate? †
- Componentがrerenderされる前に呼ばれる。
- Performanceの向上を目的に実装する。
- trueを返すとVirtualDOMの比較を行いrerenderされる。
- falseを返すとVirtualDOMの比較を行わずにrerenderもされなくなります。
componentWillUpdate? †
componentDidUpdate? †
- Component更新後に呼ばれる（初回時には呼ばれない）。
- DOMの変化にフックして何かしたい場合に使う。
componentWillUnmount? †
- ComponentがDOMから削除される時に呼ばれる。
- イベントの解除などクリーンアップ処理に使用する。
参考 †
Component と Container †
Presentational Component †
見た目を担当するコンポーネント
- 多くの場合
- this.props.childrenとして他に内包され、
- propsとしてデータとコールバックを受け取れる。
- 稀に独自のstateを持つ。
（それはデータではなくUIの状態として持つ。）
Container Component †
ロジック（物事の振る舞い）に関与するコンポーネント
- 通常、ラッピングのdivを除いてDOMマークアップ、スタイルを持たない。
- Flux UtilsのContainer.create
参考 †
その他のコンポーネント †
状態を持たないコンポーネント（SFC） †
- SFC : Stateless functional components
- stateを自身で持たないシンプルなコンポーネントの場合、
React.Componentを継承したクラスの定義は不要。
- 以下が不要な場合は、SFCとしてComponentを定義可能。
- 使い方
<Hello name="XXXX" />
テンプレート・コンポーネント †
コンポーネントの属性 †
ref属性 †
同一コンポーネントのインスタンスを識別する。
データおよびイベント連携 †
親から子 †
- 子側で（利用を）定義
this.props.XXXX
- 親側でデータを指定。
<子 XXXX={JavaScriptの値}>
JSX Spread Attributes †
親コンポーネントが保持しているデータを
全て子コンポーネントのpropsに渡す。
- 親側のpropsデータ
<子 {...this.props}>
- 親側は、
- this.stateを子のpropsにバインドしておき、
子から親 †
- 親のハンドラをthis.propsで子に渡して、
子からハンドラを呼び出す（引数指定可能）。
参考 †
js STUDIO †
Qiita †
Css in JS †
概要 †
参考 †
コンポーネント・ライブラリ †
CSS †
react-bootstrap †
- BootstrapをReactから使いやすくしたライブラリ。
- インストールと、CSS自体の読み込みが必要。
Material-UI †
拡張機能 †
react-hot-loader（AppContainer?） †
Reactコンポーネントが状態を失うことなく、
ライブで再ロードされるようにするプラグイン。
react-router-dom（BrowserRouter?） †
https://reacttraining.com/react-router/
https://reacttraining.com/react-router/web/guides/philosophy
- HashRouter?
URLフラグメント、URLハッシュ値を使用したRouter
isomorphic-fetch（fetch） †
XMLHttpRequest?代替のfetch APIのPolyfill（WHATWG Fetch polyfill）。
データ連携 †
リサイズ・移動など †
React-Resizable †
Drag&Dropで画面項目をリサイズ
React-Draggable †
Drag&Dropで画面項目を移動
UIコンポーネント †
React Contextmenu †
右クリックでメニューを表示する
React Tree Menu Component †
ツリーメニュー
rc-calendar †
カレンダーでの日付表示、日付入力機能
react-big-calendar †
スケジューラ用途のカレンダー
React Bootstrap Table †
高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。
新機能 †
React. †
Fragment †
- １つのタグにまとめるルートのタグとして使用できる。
- Fragmentタグ自体はレンダリングされない。
- 配列も返すことが出来る（ただし、keyが必要）。
createRef †
- ref属性を定義した要素のRefsを取得する方法の一つ。
- RefsによりDOMやReactコンポーネントへのアクセスが可能となる。
- createRef以外にもcallbackによる取得も可能。
createContext †
- バケツリレー（prop drilling）問題を解決する。
- react-reduxのProviderとほぼ同様の機能
- ProviderとConsumerというComponentを使う。
- ProviderでwrapしたComponent以下は
Consumer経由でいつでもProviderに
設定されたパラメータをpropsで参照できる。
Suspense †
- React.Timeoutだったり、React.Placeholderだったりしたもの。
- 子コンポーネントでPromiseをthrowすることで、
- 子コンポーネントのレンダリングを中断し、
- Promiseの完了時にレンダリングを再実行する。
lazy †
遅延ロード用のコンポーネントをimportするための機能
memo †
FCでshouldComponentUpdate相当のことができる。
getDerivedStateFromProps? †
React v16.3以降、ライフサイクルメソッドの
deprecated（非推奨）のため、代用が必要。
Pointer Events †
エラー処理 †
ErrorBoundary? †
- this.props.childrenの評価時に発生したエラーを
親コンポーネントのcomponentDidCatch?で取得できる。
getDerivedStateFromError? †
step by step 的な †
参考 †
＠IT †
Qiita †
Schoo †
学べる生放送コミュニケーションサービス
POSTD †
マイクロソフト系技術情報 Wiki †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
