React.jsについて – v – Reactの特徴
DのためのReact.js
Created by dichimaru
Reactとは
UI開発用のjavascriptライブラリ
Facebook製でFacebookやInstagram、Yahooで採用実績あり
Reactの特徴 その１
JUST THE UI
UI専用。MVCでいうところのVIEW
コンポーネントごとにプロパティ、イベントを分離できる
backboneやAngluarとも組み合わせる
Reactの特徴 その２
DATA FLOW
Reactは単一方向のデータフローを持つ。このためデータの流れがわかり易い。
Componentの親子関係が明確で、子が親のデータを書き換えることはない
DOMの状態を親で管理するため、見通しがしやすく、設計しやすい
こんなイメージ
Reactの特徴その３
Virtual DOM
仮想的なDOMの構造をjavascriptのオブジェクトとして持つ
仮想的なDOMの構造をjavascriptのオブジェクトとして持ち
そこを更新し、差分をreactが差分を計算して更新更新してくれる
パフォーマンス劣化が少なくなる
サンプルコード
// コンポーネント
var Parent = React.createClass({
handleNowButtonClick: function(pNow) {
alert(pNow);
},
render: function() {
return (
<div>
<h1>ここは親です</h1>
<child onnowbuttonclick="{this.handleNowButtonClick}" text="ここは子です">
</child></div>
);
},
});
// コンポーネントを描画
React.render(<parent>, document.getElementById('content'));
</parent>
どういう時に導入するか
SPAなどのajaxやwebsocetでの通信が多く発生するアプリケーション
サンプルはreactではないですが、このようなアプリケーションを実装する場合は
react.jsの導入を考えた方がいいかもしれません
おしまい
DのためのReact.js
Created by dichimaru