Subscribed unsubscribe Subscribe Subscribe

入門React

最近よくReact,JSX,VIrtualDOM等が目に入ります。 学習コストが高くて、Angular1系のようになるのではないかと考えていましたが、 何もせずにReactを使用しているMaterial UIではなく、Materialize(non-React)を選択するのに違和感があったのでオライリーの本を購入しました。

www.amazon.co.jp

サンプルコード

github.com

Reactの担当範囲

V(ビュー)

ajaxは担当範囲外です

仮想DOM(VirtualDOM)

render関数は現在のスナップショットを元に仮想なページを新たに作成します。
前回のrender呼び出しと今回のrenderの呼び出しの差分のみをDOMに反映します。

※JSとDOMの間のアクセスは橋(高コスト)に例えられることがよくあると思いますが、最終的に差分のみをJSからDOMに適用するというベストプラクティスを強制化したのですね

JSX(Javascript XML)

<divider>hogehoge</divider>

※これによって、セマンティック(意味論的)でコンポーネントベースが実現できます
※<container>,<card>,<user>等ができると想定できます
※divやidやjsで実現しているものに名前を付ける感じです ※マークアップとjsをまとめたものと表現できます
マークアップとjsの関係を一箇所に集約できると
※しかし、Reactの対象にajaxがないことが何か面倒くさいことになるのではとも思います
※JSXのマークアップは最終的に素のjsになる
※規模が大きくなればなるほど、PDCAが追加されていけばいくほど、Reactの良さが出てくるような

  • js側
var Divider =React.createClass({
  render: function () {
    return (
      <div className="divider">
        <h2>ほげほげ</h2><hr>
      </div>
    );
  }
});
  • JSX特有のプロパティ
key → 位置変更されるだけのコンポーネントを再描画されないようにするためのもの
ref → 親コンポーネントが子コンポーネントにアクセスするためのもの
dangerouslySetInnerHTML → innerHTMLはdangerousですよというのを強調するためのもの

DOM based XSS Prevention Cheat Sheet - OWASP

HTML Escape then JavaScript Escape Before Inserting Untrusted Data into HTML Subcontext within the Execution Context

There are several methods and attributes which can be used to directly render HTML content within JavaScript. These methods constitute the HTML Subcontext within the Execution Context. If these methods are provided with untrusted input, then an XSS vulnerability could result. For example:

element.innerHTML = “<HTML> Tags and markup”;

To make dynamic updates to HTML in the DOM safe, we recommend a) HTML encoding, and then b) JavaScript encoding all untrusted input, as shown in these examples:

element.innerHTML = “<%=Encoder.encodeForJS(Encoder.encodeForHTML(untrustedData))%>”;

よく使いそうな属性

className
onClick
onChange
htmlFor

※他の技術要素のものと被らないようにしているようです

コンポーネントのライフサイクル

  • 作成時
getDefaultProps(初回時のみ)
getInitialState
componentWillMount
render(仮想DOMが作成される)
componentDidMount(生のDOMのアクセスする)

※render内では,this.propsとthis.stateにのみアクセスできます

  • 作成後
componentWillReceiveProps(親コンポーネントにpropsを変更された場合)
shouldComponentUpdate(子以下には何もしない場合はfalseにするとパフォーマンスが上がる)
componentWillUpdate
render
componentDidUpdate
  • 破棄時
componentWillUnmount

propsとpropTytpesとstate

props → コンポーネント作成時に渡すプロパティ
propTypes → propsのバリデーション
state(内部状態) → コンポーネントの内部でのみ使用されるもの

共通のコードはどうするか

React.createClassの第一引数のmixinsプロパティに配列として渡す

DOMノードへのアクセス(ほとんどないが)

render内でアクセスしたい箇所にrefプロパティを設定する
↓
componentDIdMount内でReact.findDOMNode(this.refs.{$refプロパティ名})

サードパーティのライブラリが親にアクセスする場合

トリッキーなことが必要なため、Reactのみにするか、
Reactを捨てるか

アニメーション

var React = require('react/addons');

※後はReact.addons.XXXXXで使います

サーバーサイドレンダリング

考慮する点が多いので、割愛

※リスクがあるのでは
※renderToString()を使用する

関連ツール

Jest(Jasmineベースのテストランナー)
Immutable.js(変更できないデータ構造を実現)
Flux(デザインパターン)
Browserify(ブラウザでもrequire使えるようにしてjsをパッケージング化できる)
Watchify(依存モジュール監視)
Webpack(gruntやgulpなしで動くBrowserifyのようなもの:単体で動く)
※WebpackはJS以外のアセット(CSSや画像)もバンドルできるので、ゴミ予防になる
ReactDeveloperTools(Chromeの拡張機能)
CasperJS(E2Eテスト)
PhantomJS(HEADLESS WEBSITE TESTING:ブラウザ不要)

結論

Reactの処理のオーバーヘッドが気になりますが、
コンポーネント指向でHTMLの拡張という点がいいなと思いました。
HTMLとJSをコンポーネントというものにまとめて、パーツ化する。
AngularJS2も触ってみて、どれが一番誰でも理解しやすく、使いやすいのか。
あと、2年くらいして、HTML6がどうなっているか。
確かにゴリゴリ書くより、ブラウザのデフォルトのコンポーネントが
React等を元に作られていたらいいと思いました。
Remove all ads