hitode909の日記

きのうチュートリアルやってみたので，ドキュメントなど眺めてみる．
自分用のメモなので読んでもメリットなさそう．

Why did we build React? | React

Reactは viewを作るもの reusable UI Component
canvasに書き込んだり，Backbone.Routerとくみあわせてペライチ作ったり，サーバー上でも動いたり
Reactと同じ考え方で，iOS用のViewなども作れる

A JavaScript library for building user interfaces | React

コード例書き換えて遊べる
タイマーの例，this.intervalとかしてるけどバッティングしないのか？
- console.logすると，props, state,..に混ざって，tick, interval，とかいた
- ふつうにメソッド作ってもバッティングするはずで，気をつかってよける？

<input onChange={this.onChange} value={this.state.text} />

getInitialStateはフレームワーク側で用意されているメソッド
valueの設定はブラウザがおこなったあと，onChangeでsetStateして，Reactがさらに設定している？？ ↓ にしたら入力した文字が倍になった

   this.setState({text: e.target.value + e.target.value});

Why React? | React

シンプル宣言的，composable，まずは5分ください，もっと学びましょう
- ほんとうに再利用できるのか？？

Displaying Data | React

script type=text/babel
reactive update
- 内部的なモックのDOMと比較して効率よくDOM操作してくれる
inputをpropsと呼ぶ．property．component内ではimmutableだから書き込んではいけない
- なんか言語的な制約はないのか？
JSX
- テンプレートとディスプレイロジックは入り組んでおり複雑になる
- JSのコードから直接HTMLやコンポーネントのtreeを出力するのがベスト
- (そのむかしE4Xとかあった気がする)
- React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!') = Hello!
- JSXいらなければ使わなくてもよい

JSX in Depth | React

JSXはXMLのように見えるシンタックスの拡張
デザイナーのようなカジュアルなデベロッパに向いている
JavaScriptの意味は変えない
HTML Tags vs React Component
- HTMLタグは小文字から，React Componentは大文字から
classとforは予約語なのでclassNameとhtmlFor
displayNameがundefinedなとき，代入される変数名からdisplayNameが自動的に決まる．var Nav = React.createClass({ }); で displayName='Nav'になる
コンポーネントにネームスペース使える
式を書くには "" のかわりに {}
- きのう "{ }"して文字列になってた
disabled で true disabled={false} でfalse
コメントは{/* */}

JSX Spread Attributes | React

プロパティのわたしかた
あとからprops代入してはいけない
props = {}; で全部渡せる上書きするには

JSX Gotchas | React

JSXとHTMLとの違い
XSS対策されるので，{' '}の中に& middot; とかHTMLエンティティ書いてもそのまま出てくる．UTF8で直接書くか，\u で書くか，String.fromCharCode
- まあわかりそうデザイナーの人が書くとき混乱しそう？
仕様的に存在しないattributeを渡しても無視される．data- か， aria- は許可されている

Interactivity and Dynamic UIs | React

インタラクティブなUI
クリックでトグルする例．onClick={this.handleClick}．handleClickでsetState({liked: !this.state.liked}); renderでlikedかどうかで分岐
React.initializeTouchEvents(true)で電話やタブレット対応
- 常にやっておけばよさそう？？
それぞれのelementにイベントリスナをattachしているわけではなくて，トップレベルで単一のイベントリスナが監視している．速い．
setState(data, callback)はマージする．
- state = {a, b} のとき setState({b}) しても，{a, b}のまま，ということ？あとで試す → そのとおりだった
ほとんどのcomponentは単にpropsを受け取って描画するべき．ユーザーの入力や，サーバーへのリクエスト，時間の経過などに反応するとき，stateを使う．
componentのうち可能である限りはstatelessにしましょう(try to...って書かれてる)
いくつかのstatelsssなcomponentと，ひとつのstatefulなcomponentを作り，statefulなcomponentがstateをstatelessな子供達にpropsで渡していく，というよくあるパターン
その状態を表す最小の表現を考えてstateに入れましょう．計算済みのデータをstateに入れることは，Reactが計算してくれるかわりに，自分でデータを同期することを意味している．render内で計算しましょう．
listItems.lengthをstateに入れるかわりに，renderで.lengthを呼びましょう
React componentsをstateに入れてはいけない．renderでbuildしましょう
- 毎回作っていいの？ ← keyをつけとけば大丈夫？
propsからコピーしたデータを入れてはいけない．ただし，propsの前回の値を知るためには，propsをstateに取っておいてもよい．

Multiple Components | React

composabilityについて．複数の部品を組み立てて使える．
facebookのプロフィール画像と名前を表示する例．AvatarがProfilePicとProfileLinkを使う
owner
- Avatarがowner．他のcomponentのpropsを設定する役
- owner, ownee
children
- 親子の参照．this.props.children
ダイナミックなchildren
- keyを使える．
- Componentをrenderするまで分からないのはいけない．propsでkey=を渡すのが正しい．
ownerからowned componentに1方向でデータが流れる
パフォーマンスについて．DOM操作が遅いのであって，JSが遅いわけではない．本当になんとかしたいときはshouldComponentUpdateをオーバーライドする．

Reusable Components | React

prop Validation propTypesを使ってバリデーションできる
- React.PropTypes.以下にいろいろバリデーションの関数も書ける．return new Error('Validation failed!');．throwしてはいけない．
getDefaultPropsでデフォルトのprops返せる．一部のpropsが来てたときは，setStateしたときと同様にこれもマージされる？？
{...this.props} でそのまま渡せる
mixinできる
ES6 Classes
- class HelloMessage extends React.Component { でextend
- getInitialStateのかわりにconstructorでthis.state = で指定
- propTypes, defaultPropsもあとから代入
- バインドしてくれないので，.bind(this) か =>
- ES6にはmixinまだない
  - 助かった

Transferring Props | React

propsの転送のよくあるパターン
いろいろあってムズい var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

Forms | React

input, textarea, option は入力取れるようになんかなってる
- inputとtextareaはvalue,
- input[type=checkbox]とradioはchecked
- optionはselected
valueつきのinputはcontrolled component．input value="Hello!"するとユーザーが何を入力してもReactがrenderするさいに書き換えてしまう(ひどい)．stateにvalue: Hello! とか入れておいて，onChange={this.handleChange}して，this.setState({value: event.target.value})とかする(めんどう)．バリデーションもこれでできる(便利)．
valueがないやつはuncontrolled component．ふつうに書ける．onChangeでlistenする．defaultValue="Hello!"でデフォルト値入れつつ自由に編集できる．
ほかには，inputはdefaultChecked, selectはdefaultValue
textareaもchildrenじゃなくてvalueを使おう
↓こんなのもできる

<select multiple={true} value={['B', 'C']}>

Working With the Browser | React

the virtual dom
- DOMを直接触らないので速い
- イベントも実装してるので，IE8でもHTML5のイベント使える!!
- jQueryプラグインなど，外界とやりとりしたいこともある．そういうときに脱出用のハッチを用意している．
React.findDOMNode(component)でDOMノード取れる
React.findDOMNode(this.refs.myTextInput).focus();
ライフサイクル
- Mounting→Updating→Unmounting
- willとdid
- 呼べるメソッドいろいろ
polyfillは用意してないのでほしかったら適当に入れてね
IE8の話題あるけど無視

More About Refs | React

refsについて
ときにはfocusしたいこともある
renderの返すcomponentを保持しても意味ない
ref="myInput" で this.refs.myInputで参照できる．React.findDOMNode(this.refs.myInput)で実際のDOM
ref={(c) => this._input = c} みたいにコールバック書いて保持することもできる．mountされたあとに実行される． (ref=で名前書くほうが健全なかんじがする)
this.setStateのコールバックでfocusとか
publicなメソッドを用意しておいてrefsで拾ってきて呼ぶとか
render内でrefs呼んではいけない

Tooling Integration | React

CDNある
ブラウザで動くtransformerある．script type=text/babelをコンパイルしてくれる
npm使ってたらBabelで先にコンパイルできる
- プロダクションではこっち．JSX形式でcomponentとか作ってるのがReadt.createElementに展開される．

Add-ons | React

アドオンいろいろ(ひとまず読み飛ばすアニメーションやテストなど)

Top-Level API | React

クラス作ったり，エレメント作ったり，renderしたり
initializeTouchEvents みたいなのが生えてるのが意外もっと高尚な感じかと思ってた

Component API | React

this.state直接いじってはいけない．setStateしましょう

Component Specs and Lifecycle | React

render()関数は副作用があってはいけない．ブラウザとインタラクションしたかったらcomponentDidMountを使う
↑で気になってたgetInitialStateはここで出てきた
mixinしてbehaviorを変えられる(すごいけどたいへんそう)
willとdidみたいな感じが英語っぽい
propsとstateの違いは？ propsはimmutableで，stateはmutable？ componentWillReceivePropsがあるということは，ライフサイクル中にpropsが変わることもあるのだとしたらstateとの違いは？

Tags and Attributes | React

SyntheticEvent，クロスブラウザの対応のためにwrapしてくれる
ここにあるtagやattributeが使える

Event System | React

dataTransferとかClipboardEventとかもここで用意されてる
ということは，今後新しいイベントがブラウザで使えるようになって，実際に使えるまでは，Reactでサポートされるまで待つ必要がある？

DOM Differences | React

attributeはcamelCaseだけど，data-はlower-case only.
styleはJavaScript Objectがよい(XSS対策)
onChangeは，一般的なブラウザ(blurすると発行)とちがって，リアルタイムに送られる(詳しくはformのページ見てね)

Special Non-DOM Attributes | React

ふつうのDOMには存在しないattributeをいくつか追加してる
key: unique identifier
ref: more-about-refsを見ましょう
dangerouslySetInnerHTML: TIPSみましょう

Reconciliation | React

diffをとるアルゴリズムについてレーベンシュタイン距離O(n^2)，keyをつけてO(n)

React (Virtual) DOM Terminology | React

ReactElement
- type, props, key, ref
- ReactElementは軽く，statelessで，virtualなエレメン
- JSXなら< >で作れる
Factory
- React.createElement.bind(null, type)．divとか作りやすい．JSX書いれば使う必要ない
ReactNode
- ReactElement, string, number, Array のいずれか
ReactComponent / ReactComponent Class
- 単なるJavaScriptのクラス．少なくともrenderメソッドを持っている．
- 自分でnewして呼ぶことはないでしょう．React.createElement(MyComponent) もしくは

Advanced Performance | React

パフォーマンスについて
shouldComponentUpdate オブジェクトの中身も比較するとたいへん
オブジェクト同士の比較だと，オブジェクトは同じで，中身だけ変わってることがあってよくない
immutable.jsについて y = x.set('foo', 'baz') とかイミュータブル!!
deep compareしないので速い
immutable-jsとFluxについて Fluxにするならまずimmutable-jsでstoreしよう APIはこちら
this.messages = Immutable.List(); して this.messages = this.messages.push(new Message({timestamp: payload.timestamp...})); immutableなので変数で受ける

感想

だいたい分かってきた気がする(合ってるかどうかは知らない)
renderでvirtual DOM作って返すだけで考えるの少なくて手軽
querySelectorとかで取ってきたり，イベントハンドラセットしなおしたり，とかいらないので楽そう
Reactはたんなるviewなので，シングルページアプリケーションとか作りたかったら，ほかに状態を管理するやつがほしそう Backboneのなんかと組み合わせるとか書いてあった
裏側のモデルはこれまで通りていねいに作る必要がありそう viewが分離できるのはスッキリしそう
デザイナーの人といっしょに作ってるとき，素のHTMLとは似てるけど微妙にちがうのでむずかしそう *.jsを触るのは抵抗があるかもしれない
↓の本注文して明日くらいに届くはずなので読む

入門 React ―コンポーネントベースのWebフロントエンド開発

作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
出版社/メーカー: オライリージャパン
発売日: 2015/04/03
メディア: 大型本
この商品を含むブログ (2件) を見る