React.js Links vol.3 4/20〜4/28
2016/04/28 @koba04
これはReactに関する記事や気になるissueなどのリンクを紹介する記事です。
React core meeting notes April 21 (React)
ReactのCore Teamによるmeeting note(4/21)が公開されています。
特に大きな何かがあるわけではないですが、いくつかのbugをfixした15.0.2が今週にも出そうです。
その他では、v15のリリース時にバタバタしたのでリリースプロセスの見直しなどが検討されているようです。
あとは、ReactのコードベースをFlow化することも議題に挙がっていました。
次の大きなfeatureとしては下のNew Core AlgorithmのIssueです。 詳細はまだわかりませんが、現在一度にまとめて行っているDOMの更新を分割して行うような感じになるなのかなと思います。 最初に表示されている部分だけを更新して、その後に非表示エリアのDOMを非同期で更新するみたいな。
この内容はこの後で紹介するDan AbamovのQ&Aでも言及されていたので興味のある人は見てみるといいと思います。
Disabled inputs should not respond to clicks in IE (React Issue)
IE11でdisableだった場合にもonChageイベントが発行されるバグを修正するPRがmergeされました。
Move React Core Integration and Injection to the Core Repo #6338 (React Issue)
React NativeのReactとの連携部分がReactのリポジトリの中に含まれるようになりました。 特に何か変わることはないと思いますが、よりReact Nativeはreact-domのようにただのrendererの1つであるという位置付けになっていく流れなのかなと思います。
(実際なかなかそこまでうまく分割できていないようですが...)
Provide info about component tree to devtools #6549 (React Issue)
React Perfの再構築に伴って、React DevToolのようなものを作るための環境が整備されてきています。 ソースを見る感じ、EventHandlerを登録しておくことで、Reactの中で起こるイベントをlistenすることができるようになるのでthird partyのライブラリーも作りやすくなるのかなと思います。
Add comments/attribute indicating which component was rendered #6559 (React Issue)
ChromeとFirefox以外のReactのDevToolsを持っていないブラウザーだと、どのComponentがrenderされたのかわからないので、data-reactcomponentのような属性をDOMに付与するのはどうかという提案です。
もちろん開発環境のみで、別のフラグでOn/Offできるような感じで。
いるのかな...。
QA with Dan Abramov in Reactiflux (Link)
Dan AbramovがReactifluxのDiscordで行ったQ&Aのまとめです。 Facebookで何をやってるとかRedux、Reactについての質問に答えています。
今後の予定は下記で確認できます。Ben Alpertの会が個人的に楽しみです。そして何気にJonathan Carterが。
AMA with Lee Byron (Link)
GraphQLやImmutable.jsのメンテナーであるLee Byronが色々質問に答えています。 GraphQLやImmutable.jsだけでなく、Facebook内での開発についてやReactについてやCSS modulesどう思うかなど色々答えているので面白いです。 GraphQLとFalcor比べてどう？TypeScriptがあるのになんでFlowを作っているのか？ Burnoutにどう対処すべきかなどなど。(FacebookにはHack-a-monthという仕組みがあるらしい)
Add Redux Logo #1671 (Redux Issue)
ようやくReduxのロゴが決まったようです。
Redux FAQ (Redux documentation)
少し前に追加されたReduxのFAQページです。
**Do I have to put all my state into Redux? Should I ever use React’s setState()?**や、**How can I represent “side effects” such as AJAX calls? Why do we need things like “action creators”, “thunks”, and “middleware” to do async behavior?**など、Reduxでアプリケーションを作る時に気になるような質問があるので、Reduxを使っている人は見てみることをオススメします。
Remove unneeded code #1640 (Redux Issue)
Reduxのutils/warningがなぜ↓のようなことをしているのか。
try {
// This error was thrown as a convenience so that if you enable
// "break on all exceptions" in your console,
// it would pause the execution at this line.
throw new Error(message)
/* eslint-disable no-empty */
} catch (e) { }
https://github.com/reactjs/redux/blob/master/src/utils/warning.js#L13-L19
"break on all exceptions"を有効にしている時にここで止まるようにしているんですね。なるほど。
How to sync Redux state and url hash tag params (Redux Stackoverflow)
ReduxでURLのqueryやhashで状態を管理したい時にStateとどう同期すればいいの？react-router-redux使えばいいの？という質問です。
それに対して作者のDan Abramovが解答しています。
Reduxの質問に解答しているのをよく見るのでわからないことがあったらstackoverflowで聞いてみるといいかもしれないですね。
Stateと管理する必要はなくて、必要となった時にURLから値を取得して使えばいいという答えです。 StateにすることでActionになるので、リプレイなどがやりやすくなるメリットはありますが、必要でない場合は複雑になるだけです。
MobX (Library)
Observableを活用したReduxライクなState Managementのライブラリーです。 TypeScriptで書かれています。 Reactと組み合わせることが想定されているようで、Reactとbindingするためのライブラリーもあります。
10分でわかる説明
ちゃんと中身見てないので、イマイチどのあたりが素晴らしいのかわからかなったので、気が向いたらまた見てみます。
@observable decorator (ES2015)って書いたのがとても気になりました...。