hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

トップ > Reactのドキュメント眺める

Reactのドキュメント眺める

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

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フロントエンド開発

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

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