React
コンポーネントライフサイクルの反動

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript

前書き

ライフサイクル・メソッドは、コードを実行し、コンポーネントのさまざまな時点でコンポーネントとやりとりするために使用されます。これらのメソッドは、コンポーネントMounting、Updating、Unmountingをベースにしています。

コンポーネントの作成

Reactコンポーネントが作成されると、いくつかの関数が呼び出されます。

React.createClass （ES5）を使用している場合は、5つのユーザー定義関数が呼び出されます
class Component extends React.Component （ES6）を使用している場合は、3つのユーザー定義関数が呼び出されます

`getDefaultProps()` （ES5のみ）

これが最初に呼び出されるメソッドです。

この関数が返すProp値は、コンポーネントがインスタンス化されたときに定義されていない場合、デフォルトとして使用されます。

次の例では、特に指定されていない場合、 this.props.nameはデフォルトでBobなります。

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

`getInitialState()` （ES5のみ）

これは呼び出される2番目のメソッドです。

getInitialState()の戻り値は、Reactコンポーネントの初期状態を定義します。 Reactフレームワークはこの関数を呼び出し、戻り値をthis.stateます。

次の例では、 this.state.countはthis.props.initialCountの値でthis.props.initialCountます。

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

`componentWillMount()` （ES5およびES6）

これは3番目のメソッドです。

この関数を使用して、コンポーネントをDOMに追加する前にコンポーネントを最終的に変更することができます。

componentWillMount() {
  ...
}

`render()` （ES5とES6）

これは4番目のメソッドです。

render()関数は、コンポーネントの状態と小道具の純粋な関数でなければなりません。これは、レンダリング処理中にコンポーネントを表す単一の要素を返します。ネイティブDOMコンポーネント（例： <p /> ）または複合コンポーネントのいずれかを表す必要があります。レンダリングする必要がない場合は、 nullまたはundefined返すことができnull 。

この機能は、コンポーネントの小道具または状態が変更された後に呼び出されます。

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

`componentDidMount()` （ES5およびES6）

これは5番目のメソッドです。

コンポーネントがマウントされ、コンポーネントのDOMノードにアクセスできるようになりました（例： refs 。

このメソッドは、以下の目的で使用する必要があります。

タイマーの準備
データの取得中
イベントリスナーの追加
DOM要素の操作

componentDidMount() {
  ...
}

ES6の構文

コンポーネントがES6クラス構文を使用して定義されている場合、関数getDefaultProps()およびgetInitialState()は使用できません。

代わりに、 defaultPropsをクラスの静的プロパティとして宣言し、クラスのコンストラクタで状態の形状と初期状態を宣言します。これらは、構築時に他のReactライフサイクル関数が呼び出される前にクラスのインスタンスに設定されます。

次の例は、この代替アプローチを示しています。

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

`getDefaultProps()`置き換える

コンポーネントのデフォルト値は、クラスのdefaultPropsプロパティを設定して指定します。

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

`getInitialState()`置き換える

コンポーネントの初期状態を設定する慣用的な方法は、 this.stateをコンストラクタに設定することthis.state 。

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

コンポーネントの更新

`componentWillReceiveProps(nextProps)`

これはプロパティの変更で呼び出される最初の関数です。

コンポーネントのプロパティが変更されると 、Reactはこのプロパティを新しいプロパティで呼び出します。あなたはthis.propsとし、nextPropsで新しい小道具に古い小道具にアクセスすることができます。

これらの変数を使用すると、古い小道具と新しい小道具の間でいくつかの比較操作を行うことができます。

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

`shouldComponentUpdate(nextProps, nextState)`

これは、 プロパティの変更と最初のオン状態の変更で呼び出される2番目の関数です。

デフォルトでは、別のコンポーネント/コンポーネントがコンポーネントのプロパティ/状態を変更した場合、 Reactはコンポーネントの新しいバージョンをレンダリングします。この場合、この関数は常にtrueを返します。

この関数をオーバーライドして、コンポーネントを更新する必要があるかどうかをより正確に選択できます。

この関数は主に最適化に使用されます。

関数がfalseを返す場合、 更新パイプラインは直ちに停止します。

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

`componentWillUpdate(nextProps, nextState)`

この関数は、 componentWillMount()ように機能します。 変更はDOMにはないため、更新が実行される直前にいくつかの変更を行うことができます。

/！\： this.setState（）は使用できません。

componentWillUpdate(nextProps, nextState){}

`render()`

いくつかの変更がありますので、コンポーネントを再レンダリングしてください。

`componentDidUpdate(prevProps, prevState)`

componentDidMount()同じことです： DOMはリフレッシュされるので、ここでDOMでいくつかの作業を行うことができます。

componentDidUpdate(prevProps, prevState){}

成分の除去

`componentWillUnmount()`

このメソッドは、コンポーネントがDOMからアンマウントされる前に呼び出されます。

次のようなクリーニング作業を実行するのに適しています。

イベントリスナーの削除
タイマーをクリアします。
ソケットを停止します。
還元状態を整理する。

componentWillUnmount(){
  ...
}

componentWillUnMountで、アタッチされたイベントリスナーを削除する例

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

反応成分コンテナ

Reactアプリケーションを構築する場合、主要な責任に基づいてコンポーネントをPresentationalコンポーネントとContainerコンポーネントに分けることが望ましいことがよくあります。
プレゼンテーションコンポーネントは、データの表示にのみ関係します。モデルをビューに変換する関数と見なすことができ、しばしば実装されます。通常、内部状態は維持されません。コンテナコンポーネントは、データの管理に関係します。これは、自国の州を経由して内部的に行うことも、Reduxのような州の管理図書館で仲介することもできます。コンテナコンポーネントはデータを直接表示するのではなく、データをプレゼンテーションコンポーネントに渡します。

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

異なる州のライフサイクルメソッド呼び出し

この例は、ライフサイクルメソッドの使用方法とメソッドの呼び出し方法について説明している他の例を補完するものです。

この例では、どのメソッド（componentWillMount、componentWillReceivePropsなど）が呼び出され、異なる状態のコンポーネントに対してどのシーケンスが異なるかを要約しています。

コンポーネントが初期化されるとき：

getDefaultProps
getInitialState
componentWillMount
レンダリングする
componentDidMount

コンポーネントの状態が変更された場合：

shouldComponentUpdate
componentWillUpdate
レンダリングする
componentDidUpdate

コンポーネントに小道具が変更された場合：

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
レンダリングする
componentDidUpdate

コンポーネントがアンマウント中の場合：

componentWillUnmount

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

前書き

コンポーネントの作成

getDefaultProps() （ES5のみ）

getInitialState() （ES5のみ）

componentWillMount() （ES5およびES6）

render() （ES5とES6）

componentDidMount() （ES5およびES6）

ES6の構文

getDefaultProps()置き換える

getInitialState()置き換える