Reactガイドを読んでいくその75

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

パフォーマンス最適化

shouldComponentUpdateについての続きです。

こんなコードがあったとします。

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

props.color または state.count の変化の有無をshouldComponentUpdate はチェックしています。値の変化があった場合にのみコンポーネントの更新をするのは前回でも学習したことになります。
コンポーネントが複雑だった場合はpropsとstateのすべてのフィールドに対して浅い比較をすることでコンポーネントの更新の要否を判断する。
この機能はReact.PureComponentを継承するだけで使用でき、シンプルに実装することが可能。

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

shouldComponentUpdate の代わりにReact.PureComponent を使用することができる。
ミューテートされている可能性がある場合などでは利用できない。
このため複雑なデータ構造を持ったアプリの場合はこの機能を利用することはできない。

便利な機能だけれど汎用的に使うことはできないっぽい。

今日はここまで。