ほぼ日刊サービス開発日誌

React, firebase, 機械学習など

sponsored

Reactのライフサイクルメソッドとその使いドコロのまとめ - ajax callをするのに最も適した場所は?

https://i1.wp.com/wptavern.com/wp-content/uploads/2015/12/react.png?ssl=1

React.jsを勉強し始めて3日経ちました。

いまいちよくわからなかったReactのライフサイクルメソッドの使い分けについて調べたのでまとめます。

ライフサイクルと使いどころ

componentWillMount

コンポーネントがDOMツリーに追加される前に一度だけ実行されるメソッド

使い所

初期化処理などに利用する。 ここで setState()するとその値を利用してrenderingされる.

よく使うけど、廃止される予定のメソッド。ES6スタイルのclassにおけるconstructor() はcomponentWillMount の代替となれるのでそこに移転すると良い、らしい。

componentDidMount

最初の renderが実行された直後に,1回だけ実行されるメソッド。

document.querySelector('#someId')のようにDOMメソッドへのアクセスができる。

使い所

データを取得する(ajaxリクエストをサーバーサイドに送ってstateを更新したりする) のに一番適した場所とされる

最初に一回レンダリングされていることが保証されているので、propsもstateもしっかり存在しており、undefinedエラーに遭遇することがない。

 componentDidMount() {
    axios.get(`http://sample.com/r/${this.props.category}.json`)
      .then(res => {
        const posts = res.data.data.children.map(obj => obj.data);
        this.setState({ posts });        #=> render()のトリガーとなる
      });
  }

  render() {
    return (
      <div>
        <h1>{`/r/${this.props.category}`}</h1>
        <ul>
          {this.state.posts.map(post =>
            <li key={post.id}>{post.title}</li>
          )}
        </ul>
      </div>
    );
  }

componentWillReceiveProps(nextProps)

コンポーネントが新しいpropsを受け取るたびに呼ばれる. このメソッドの実行時点では this.props は古いもののまま。

使い所

propsが変わったら毎回何かを変更したいときに利用する

shouldComponentUpdate(nextProps, nextState)

trueを返すと再描画が実行され、falseを返すようにすると描画されない。

使い所

パフォーマンスをよくするために、不要な再描画に関してfalseを返すよう設定したりする

componentDidUpdate

propsやStateの変更による再描画が行われた直後に実行される。

使い所

propsやstateの変化に応じてDOMを更新したりする時に利用される

compoenentWillMount

コンポーネントがDOMから削除される直前に実行される。

使い所

タイマーのキャンセルやスクロールイベントのリスナーの削除などを行う。

参考

React Lifecycle Methods- how and when to use them – Code == Life

https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/