React Native renderの更新タイミング調査

目的

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 (
     
        normail
        {this.render_num}
     
    );
  }
}

// PureComponentクラス
class Pure extends React.PureComponent {

  constructor(props) {
    super(props)
    this.render_num = 0
  }

  render() {
    this.render_num++

    return (
     
        pure
        {this.render_num}
     
    );
  }
}


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のやつ


ここのメソッドで第一階層しかチェックしてない。まぁパフォーマンスを考えるとしかたないのかな・・・

0 件のコメント:

コメントを投稿

.mitmproxyを使ってHTTPSの通信を確認

公式のドキュメント https://docs.mitmproxy.org/stable/ # install ## mac ``` $ brew install mitmproxy ``` ## iPhone ### 証明書 セキュアな通信を傍受するために、プロファイ...