Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ

技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta

[namikingsoft]

Electronでもdevtoolsコンソールから使えた。良さげ。 > react-addons-perf

[mizchi]

pure component への置き換えでほとんど解決しそう

[mojimojikun]

このあたりを読みつつプロファイリングしてみる

[mi_kattun]

react-addons-perf

[yoshikidz]

これ使う

[teppeis]

React/React DnDのパフォーマンスをreact-addons-perfで解析して改善した話。やはりshouldComponentUpdateが肝

[akkun_choi]

“使い方”

[masa-wo]

お、@_iro さんだ。

[oscdis765]

辛そう

[efcl]

React Componentで作成したアプリにのボトルネックの調査方法や改善手法について。 react-addons-perfを使ってプロファイルを見ながらやっていく話

[plane25]

“改善可能なのは「仮想DOMの再構築～差分計算」の部分です。更新対象のサブツリーに含まれるコンポーネントの中には、まったく更新の必要がないものもあったりします。” ほう

[takaesu]

react-addons-perfを使ったプロファイリング