React.js Links vol.8
2016/06/23 @koba04
これはReactに関する記事や気になるissueなどのリンクを紹介する記事です。
React v15.2.0
15.2.0がリリースされました。
プロダクションビルドでエラーコードが付加されるようになりエラーの調査がしやすくなったことや、PropTypesやkeyのwarning時のスタックトレースがComponentのツリーで表示されるようになりました。 開発をサポートするための機能です。
その他はちょっとしたバグ修正などが中心です。
Core Notes June 23
恒例のCore TeamのMeeting Noteです。
Facebook内でのReact.createClassからClassによるComponent定義への移行作業は引き続き行われているようです。
Core Notes June 30
こちらもMeeting Noteです。
新しいReconcilerが徐々に動き始めているようです。
また、React.createClassからClassによるComponentによる移行についても進んでいるようです。
下のcodemodを使って、ClassによるComponent定義&property initializer&Flowに変換を行っているようです。
React Teamとしては、Class + property initializer + Flowの組み合わせについては、ドッグフーディング中なので現時点では推奨しているわけでないという立場です。
また、Facebook内部ではPureRenderMixinがたくさん使われていて、それを置き換えるためのものとしてReact.PureComponentが考えられているようです。
React.PureComponentに関しては、最初のProposalでは内部のStateless Functional Componentsにも最適化が適用される予定でしたが、混乱や問題点があることから、新しく出されたPRではただのClass版のPureRenderMixinとなっています。そしてmergeされました。
また、React.createClassをAddonにして、さらにPerfとTestUtils以外のAddonsについては、React Team外にownershipを移して管理するも考えているようです。
Resolve refs in the order of the children #7101
更新時の新しくマウントされるReactElementに対するRefの解決する順番を変更するPRです。 詳しくはPRにある画像を見るとわかると思います。
Added jsx-self babel transform plugin #3540
warning目的でReactElementに__selfのPropを追加するBabelのtransfomerです。
developmentの時だけ有効にすることが推奨されています。
Spec proposal: extending the language to allow spreading children #57
JSXでのchildrenの仕様に対するProposalです。
JSXChildを拡張して{...children}を許容するようにするものです。
RFC: Flat bundle using Rollup
現在CommonJSベースで書かれているReactのコードをRollupでバンドルしてTree ShakingやDead Code Eliminationによりファイルサイズを削減するPRです。React Teamのインターンの人ですね。
まずはトップレベルでないrequireを全てトップレベルにしてES Modulesに変換できるようにして、BabelでCommonJSをES Modulesに変換してRollupでバンドルするという方法を採っているようです。
(RollupのCommonJSプラグインを使う方法よりサイズが小さくなるらしいです)
Flow v0.28.0
Flowの0.28.0がリリースされています。 変更内容については、下記のブログでも書かれています。
ReactNative v0.29.0
ReactNativeの0.29.0がリリースされています。
Don't Use Bind When Passing Props
PureComponentなんかとも関連しますが、なぜrenderメソッドの中でFunction.prototype.bindしたりArrow Function使うのがダメなのかについて書いたエントリーです。 過去にもあったような気もしますが。 上記を使って書かれているサンプルも多いので、使うときは何が起きているのか意識して使った方がいいと思います。 （Function.prototype.bindやArrow Functionsを使うと当たり前ですが新しい関数が都度生成されるので）