React v16でのサーバーサイドレンダリング

React v16について書いたブログの中の、サーバーサイドレンダリングについての部分に間違いがあったので修正しつつ、v16のサーバーサイドレンダリングについて補足します。

http://blog.koba04.com/post/2017/09/27/react-v16-changes/

Hydrationしたい場合は、renderToStringまたはrenderToNodeStreamで行う必要があります。

renderToStringまたはrenderToNodeStreamには、data-reactroot以外にも変数部分を識別するためのコメントノードなどが挿入されていて、それが必要であるためです。

それでは、v15とv16でのサーバーサイドレンダリングの違いを見てみます。

Read on →


React Fiber現状確認

F8でもReact Fiberについての発表もあったので、気になっている人も多いReact Fiberの現状について簡単に書きたいと思います。

Reactの完全な書き換えということで、使い方も変わってしまうと思っている人もいると思いますが、内部実装の書き換えであり、利用者から見える部分ではほとんど変更はありません。

もちろん、react-fiberというパッケージをインストールするというわけでもありません。

むしろ、v16の時点では現在の実装と互換性を保たれているので、v16がリリースされた時に、v15.5を使っていればほとんどそのままv16に更新できると思います。 そして、言われなければ内部実装が変わっていることに気づかないのではないかと思います。

とりあえずどうなるのか知りたい人向けのまとめ

  • v16では、基本的にはv15の時と同じように動作します。逆に言うとパフォーマンスもそんなに変わらない(はず)です
  • renderメソッドから[<Foo />, <Bar />] みたいに配列で返したり、文字列をReactElementでラップすることなく返せるようになります
  • v17では、デフォルトで非同期のrendering(後述)になります。v16でも何らかのAPIでopt-inで試せるようにはなりそうです。現状はReactDOM.unstable_deferredUpdatesで一部試すことができます
  • v17では、劇的に高速になるというよりは、ユーザーの入力をブロックしないようにしたり、柔軟に更新処理をスケジューリング出来るようになる予定です

注意点

以下の情報は、Reactをただ使いたい人にとっては知る必要のない内部実装の話です。多くの人にとってはここまでの情報でReact FiberについてはOKだと思います。v17になるまでは。

Read on →

React v15.5(6) and v16

Reactのv15.5がリリースされたので、v15.5での変更点とv16についてのまとめです。

v15.5はバグフィックスとv16での変更点に対する準備なので、可能ならあげておいた方がスムーズにv16がリリースされた時に対応できると思います。

基本的には、v16で色々と廃止するための警告が主になります。 最近のバージョンと同様に、コアから必要なもの以外をどんどん削ぎ落としていく流れです。

この警告に対応するために、Enzymeなどでは利用するために必要なライブラリーが変更されているので更新する際には注意が必要です。

また、当初の予定ではv15.5がv15系の最後のリリースになる予定でしたが、上記のような混乱もあったためフォローアップとしてv15.6もリリースされることになりました。 なので、v15.6がリリースされてから対応するのもアリだと思います。

廃止されるものは色々ありますが、基本的に全てのものに対してマイグレーションのパスは提供されているので対応可能だと思います。 ただ、アクティブにメンテされていないくて15.5対応版をリリースしていないライブラリーを使っていると色々警告が出ると思います。 場合によっては、その警告によってテストが壊れることがあるかもしれません。

Read on →


React.js meetup #4

前回が2月だったので約半年振りですが、React.js meetup #4を開催しました。

今回は 67/80人 の方が参加してくださりました!感謝!

今回も、前回同様にサイボウズさんに会場を提供して頂き開催することができました。 サイボウズの皆様、参加者の皆様、発表者の皆様ありがとうございました!!

Read on →