目的
React Nativeで、reduxとreact-navigationを使ってるとやたらとrenderが走る。
タブやナビゲーションの親のViewでもレンダリングされているので、一度詳しく調べてみる。
調査
react-nativeのReact.PureComponentとは
PureComponentはComponentのshouldComponentUpdateを変更したもの。
shallowの比較により、Updateするか決める。
サンプルコード
```
// 通常のComponentクラス
class Normail extends React.Component {
constructor(props) {
super(props)
this.render_num = 0
}
render() {
this.render_num++
return (
);
}
}
// PureComponentクラス
class Pure extends React.PureComponent {
constructor(props) {
super(props)
this.render_num = 0
}
render() {
this.render_num++
return (
);
}
}
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
param1: "hoge",
param2: { "hoge": "val" },
}
}
render() {
const {param1, param2} = this.state
return (
);
}
}
```
Propの値がどう変わるかで挙動が変わる
文字列や数字の場合
this.setState({ param1: "hoge" })を実行すると
React.Componentはレンダリングされる
React.PureComponentはレンダリングされない！
同じObjectの場合
this.setState({ param2: this.state.param2 })
React.Componentはレンダリングされる
React.PureComponentはレンダリングされない！
中身は同じObjectの場合
this.setState({param2: {"hoge": "val"}})
React.Componentはレンダリングされる
React.PureComponentはレンダリングされる
PureComponentはただのshallowEqualなので、第一階層だけしか比較できない
該当コードにあるように、shallowEqualをつかって比較している。
shallowEqualはFacebookのやつ
ここのメソッドで第一階層しかチェックしてない。まぁパフォーマンスを考えるとしかたないのかな・・・
