この記事はReact Native Advent Calendar 2019の 12 日目の記事です。
10 日目は、React Native の iOS/Android ビルドする bitrise.yml を晒してみる&ビルド高速化などでした。
パフォーマンスチューニングをしようとした際に、Weak Point を調べるライブラリを調べていたので、紹介したいと思います 🤘
ライブラリ紹介
why-did-you-render
コンポーネントが再 Rendering されたときに、何が起因で再 Rendering が起こったのかを console に出してくれる君。
Statefull な Component が多いときに入れておくと便利そう。
使い方は、Root となる箇所で以下のように書いとくだけ。
すべての Component で更新がかかったときにログを出してくれる。
import whyDidYouRender from "@welldone-software/why-did-you-render" import React from "react" if (__DEV__) { whyDidYouRender(React) }
React Hooks を使っている場合は、useWhyDidYouUpdateなるものを見つけたので、こちらを使ってみると良いかも。
react-native-slowlog
処理に 16ms 以上かかりフレーム落ちが発生した際に Yellow Box や console.log を出して知らせてくれる君。
こちらは、各 component の constructor で呼び出してやる必要がある。
whyDidYouRender のようにシュッといかないのがちょっと不便。
import slowlog from "react-native-slowlog" import React from "react" class Master extends Component { constructor(props) { super(props) // __DEV__を見て、よしなにログを出さないようにしてくれる slowlog(this, /.*/) } }
React Profiler API
React 16.9 から導入された、Component の Rendering 時間を細かく出してくれる君。
公式なので追加ライブラリなしに使えて、とても良い気がしている。
チェックしたい Component を React.Profiler で Wrap してやると、実際に掛かった Rendering 時間をcallbackで返してくれる。
const component = props => ( <React.Profiler id="MyComponent" onRender={onRenderCallback}> <MyComponent /> </React.Profiler> ) function onRenderCallback( id, phase, actualDuration, baseDuration, startTime, commitTime, interactions ) { console.log( `id: ${id}, phase: ${phase}, actualDuration: ${actualDuration}, baseDuration: ${baseDuration}, startTime: ${startTime}, commitTime: ${commitTime}, interaction: ${interaction}` ) }
React Native v0.61 から React 16.9 になっているので、追従している人は使える。
Expo も数日前のリリースで v0.61 に追いついたので、Expo の人も更新すれば使える。
おわり
重くなりやすい大きめな画面に入れておいて、動作確認をシュッとできるようにしとくと便利で良いですね。 無駄にRenderingしないように気をつけていきましょう😇
明日はtsukueさんです！
