.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

  • JSX(*.jsx、*.tsx)で作成され、Node.js開発環境でコンパイルされて*.jsを得る。
  • 下記の特徴を見ると、JSのMV*もXAML的になったなぁという感覚がある。
  • ただ、IDEが良くならないとエンプラの要求する生産性にまで上がらなさそうではある。
  • ReactNativeに関しては、Microsoft社が力を入れているように見える。

特徴

Just the UI

  • View(UI)部分のみを管理する

コンポーネント指向

  • Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築する。
  • なお、コンポーネントのインスタンスのことを「エレメント」と言う。

仮想DOM

  • 設計と速度が両立すると言われている。
  • 仮想DOMの構造体表現と、それを用いたdiff/patchアルゴリズム。
    • 最終的に生成されるHTMLの複雑なDOMではなく、仮想的なDOMを記述する。
    • 2つのツリー構造のdiffを算出して、それをDOMにpatchするアクションを作る。
  • JSXで記述する。

Data flow

  • コンポーネント中のデータの流れを

と、一方向化している。

  • 詳しくは、Fluxを参照。

自分の言葉で言うと、

経緯

  • HTML再描画が、Ajaxによって部分描画のDOM操作になり、
  • HTML/JavaScriptにはイベントドリブンの仕掛けが整っている。
  • この土台の上で、リッチなUIサブシステムを実現しようとしたら、
  • DOM操作のビルティング・ブロック化が目標になり、
  • これを実現しているのがReact Fiberあたりの仕組みである。

...と言う事だろうか。

React Fiber

  • 仮想DOMを更新してUIに反映するアルゴリズムをリコンシリエーション(reconciliation)と言う。
  • 以前は、仮想DOMのツリーを上から再帰的に比較していくという処理だった。
  • Fiberでは再帰的な処理をやめて、ReactElement?ごとの更新処理を
    連結リストにして、一つ一つの更新処理を独立したものとして扱えるようにした。
    • 同期的な再帰処理を、停止・再開可能な非同期処理(Fiber)に分割した。
    • Fiberのスケジューリングが可能になった(インクリメンタルレンダリング)

※ そもそもFiberとは「ファイバー (コンピュータ) - Wikipedia」のこと。

基本的な事項

言語

JSXをサポートする言語を使用する。

Babel(ECMAScript)

  • Babel」(ECMAScript)を導入する方法が最も簡単。
  • プログラム・ファイルの拡張子は、*.jsx。

TypeScript

  • また、「TypeScript」でもサポートされている(TSX)。
  • プログラム・ファイルの拡張子は、*.tsx。

JSX

画面定義のマークアップ言語

特徴

JSの拡張言語で、

  • React 要素作成する仮想DOMを、簡便な形式でXMLマークアップのシンタックスを追加する。
  • XMLマークアップには、標準のHTML5 + 拡張属性で、HTMLタグとJSXタグが共存する。
  • 制御構文とXMLマークアップが混在するという意味で、Razor的。

変数出力

{変数名}でJavaScript変数を出力

イベント・ハンドラ

  • 基本的に以下のように書く。
    <button onClick={()=>this.renderChange()}>切替</button>
  • 以下は問題がある。
  • レンダリング時にclickActionが起動してしまう。
    <div onClick={this.clickAction()}>
  • thisにアクセスできない。
    <div onClick={this.clickAction}>

属性の指定

自由に属性を設定可能。

<div>
    <MyComponent 
        myTitle={'タイトル'}
        myValue={this.state.value} />
</div>

子コンポーネントからprops.(定義した属性名)と利用。

Css in JS

  • React自信にデザインの機能はないのでCSSを利用する。
  • 「Css in JS」と言われる考え方が登場し、
    React用のCSSをインポート可能になっている。
  • classはclassNameと書く。styleはstyleで良い。
    <button className="btn btn-default" style={{color:"gray"}}/>

コンポーネントの配置

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

  • モジュール化することによってインポート可能なクラスにする。
    export class MyComponent extends React.Component {
  • defaultも付けると、デフォルトで読み込むモジュールになる
    export default class MyComponent extends React.Component {

import

exportでモジュール化したクラスは、importでインポートが可能。

  • 1クラス、インポート
    import { SubComponent1 } from './SubComponent';
  • nクラス、インポート(1ファイルに複数定義されている場合。
    import { SubComponent1, SubComponent2 } from './SubComponent';

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,
        }
      }
  • stateなし
    stateを使わない、propsだけのコンポーネントの場合、
    constructor(props, context){
        super(props, context)
    }

constructorの記述自体を丸々省略できる。

render

  • 生成したいHTML(正確にはJSX)を書く。
  • return( の直下は1つのエレメントしか置けない。
  • 繰り返し処理
    map内にラムダ式を書く。
  • 配列
    items = [
        { value : 'apple' },
        { value : 'orange' },
        { value : 'banana' },
     ];
  • return items.map(_item => {
        return(
            <li>{_item.value}</li>
        )
    })
  • キー、値
    return items.map((_item,_key) => {
        return(
            <li key={_key}>{_item.value}</li>
        )
    })
  • コンポーネントの再描画
    • 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(変更通知)的に使う。
    • 親Componentのstatepropsとして渡されていて、
    • その値が変化した時に何かしたいときに使用する。
    • setStateすると、描画もされる。

v16.3以降、deprecated(非推奨)

shouldComponentUpdate?

  • Componentがrerenderされる前に呼ばれる。
  • Performanceの向上を目的に実装する。
    • trueを返すとVirtualDOMの比較を行いrerenderされる。
    • falseを返すとVirtualDOMの比較を行わずにrerenderもされなくなります。

componentWillUpdate?

  • Component更新前に呼ばれる(初回時には呼ばれない)。
  • この中でsetStateを呼ぶことは出来ない(→ componentWillReceiveProps)。

componentDidUpdate?

  • Component更新後に呼ばれる(初回時には呼ばれない)。
  • DOMの変化にフックして何かしたい場合に使う。

componentWillUnmount?

  • ComponentがDOMから削除される時に呼ばれる。
  • イベントの解除などクリーンアップ処理に使用する。

参考

  • Qiita

Component と Container

Presentational Component

見た目を担当するコンポーネント

  • 独自のマークアップとスタイルを持つ。
  • アクションやストアの部分は分離される。
  • 多くの場合
    • this.props.childrenとして他に内包され、
    • propsとしてデータとコールバックを受け取れる。
  • 稀に独自のstateを持つ。
    (それはデータではなくUIの状態として持つ。)
  • SFCとして記述できる場合は、SFCとして記述する。

Container Component

ロジック(物事の振る舞い)に関与するコンポーネント

  • 通常、ラッピングのdivを除いてDOMマークアップ、スタイルを持たない。
  • 基本的に状態保持と処理を行う
  • データソースとして機能する傾向がある
  • 通常、上位コンポーネントを使用して生成される
  • React Reduxのconnect
  • RelayのcreateContainer
  • Flux UtilsのContainer.create

参考

その他のコンポーネント

状態を持たないコンポーネント(SFC)

  • SFC : Stateless functional components
  • stateを自身で持たないシンプルなコンポーネントの場合、
    React.Componentを継承したクラスの定義は不要。
  • 以下が不要な場合は、SFCとしてComponentを定義可能。
    • stateの管理
    • lifecycle系のメソッド
    • Contextrefs
    • サードパーティライブラリのインスタンス管理
    • パフォーマンスの効率化
  • 定義
  • 匿名関数
    const Hello = function() {
      return <div>Hello XXXX</div>
    }
  • ラムダ式
    const Hello = () => <div>Hello XXXX</div>
  • 使い方
    <Hello />
  • 匿名関数
    const Hello = function(name) {
      return <div>Hello name</div>
    }
  • ラムダ式
    関数の引数でDestructuring
    const Hello = ({name}) => <div>Hello {name}</div>
  • 使い方
    <Hello name="XXXX" />

テンプレート・コンポーネント

  • 定義
    {this.props.children}で子を描画。
    // テンプレート・コンポーネント
    class TemplateComponent extends React.Component {
      render() {
        return (
          <main>
            <header>
              <h2>{this.props.title}</h2>
            </header>
            <div>
              {this.props.children}
            </div>
            <footer>
              <p>copyright company</p>
            </footer>
          </main>
        )
      }
    }
  • 利用
    TemplateComponent?ChildComponent?を指定。
    // Mainコンポーネント
    class MainComponent extends React.Component {
      render() {
        return (
          <section>
            <h1>Main Title</h1>
            <TemplateComponent title={'コンテンツタイトル'}>
              <ChildComponent />
            </TemplateComponent>
          </section>
        )
      }
    }

コンポーネントの属性

ref属性

同一コンポーネントのインスタンスを識別する。

データおよびイベント連携

親から子

props

  • 基本
  • 子側で(利用を)定義
    this.props.XXXX
  • 親側でデータを指定。
    <子 XXXX={JavaScriptの値}>

JSX Spread Attributes

親コンポーネントが保持しているデータを
全て子コンポーネントのpropsに渡す。

  • 子側の定義は不要で、以下のように利用可能。
  • 任意のデータ
    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <子 {...props} />;
  • 親側のpropsデータ
    <子 {...this.props}>

componentWillReceiveProps

  • 親側は、
    • this.stateを子のpropsにバインドしておき、
  • setStateでstateの変更を反映する。
  • 子側は、
  • propsの更新をsetStateで反映する。
    componentWillReceiveProps(newProps) {
      //JSON.stringify(newProps);
      this.setState({count: newProps.count});
    }

子から親

  • 親のハンドラをthis.propsで子に渡して、
    子からハンドラを呼び出す(引数指定可能)。

参考

js STUDIO

  • React 0.13 日本語リファレンス

Qiita

Css in JS

概要

参考

  • Qiita

コンポーネント・ライブラリ

CSS

react-bootstrap

  • BootstrapをReactから使いやすくしたライブラリ。
  • インストールと、CSS自体の読み込みが必要。

Material-UI

  • マテリアルデザインをReact.jsで実現するライブラリ。
  • Bootstrapと提供機能はほとんど同じ。
     npm install material-ui --save

拡張機能

react-hot-loader(AppContainer?

Reactコンポーネントが状態を失うことなく、
ライブで再ロードされるようにするプラグイン。

react-router-dom(BrowserRouter?

https://reacttraining.com/react-router/
https://reacttraining.com/react-router/web/guides/philosophy

  • Router
  • BrowserRouter?
    通常のRouter
  • HashRouter?
    URLフラグメント、URLハッシュ値を使用したRouter
  • パラメタ
  • パラメタを持たないコンポーネント
    <Route exact path="/" component={FormInput}/>
  • パラメタを持つコンポーネント
  • オブジェクト
    <Route exact path="/" render={props => <FormInput data={this.state.data} />} />
    
    <p>Data:{ this.state.data }</p>
  • URL
    <Route path="/:id" component={FormInput}/>
    
    <p>ID:{props.match.params.id}</p>
  • タグ
    • Link
    • Redirect

isomorphic-fetch(fetch)

XMLHttpRequest?代替のfetch APIのPolyfill(WHATWG Fetch polyfill)。

データ連携

Flux

Redux

Hooks

リサイズ・移動など

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

  • 1つのタグにまとめるルートのタグとして使用できる。
  • 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 的な

Reactのファースト・ステップ

Reactのセカンド・ステップ

Reactのサード・ステップ

Reactの4thステップ

ReactNative

参考

@IT

Qiita

Schoo

学べる生放送コミュニケーションサービス

POSTD

マイクロソフト系技術情報 Wiki


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-10-24 (木) 18:03:02 (20d)