React Componentについて

Tuyoshi Akiyama
Jul 20, 2017 · 3 min read

以下記事を参考に、コンポーネントについてまとめます。

React.component はabstract base classであるので、それ自体を直接参照することはめったにありません。

普通は、下記コード例のように、classで(または関数で)定義します。

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

ここでは、よく使われるメソッドについて説明していきます。

render()

このメソッドが呼ばれたとき、this,propsとthis.stateをもとに、一つのelementが返されます。

null, falseも返すことができます。

また、このrenderメソッドはコンポーネントに変化を加えるものであってはなりません。

constructor()

まず、constructorを設置するときは、必ず最初にsuper(props)を置かなければなりません。

コンストラクターの主な役割は、this.stateを設定する場所として機能します。

componentDidMount()

このメソッドは、コンポーネントがマウントされた直後に呼び出されます。

DOMノードを必要とする初期化はここを通らなければなりません。

リモートエンドポイントからデータをロードする必要がある場合は、ネットワーク要求をインスタンス化する場所として適しています。

このメソッドでthis.stateを設定すると、再renderingがトリガーされます。

componentWillUnmount()

タイマーの無効化、ネットワーク要求のキャンセル、componentDidMountで作成されたDOM要素のクリーンアップなど行う際に、このメソッドで必要なクリーンアップを実行します。

setState()

setStateは、コンポーネントの状態の変更をエンキュー(待ち行列にいれる)し、Reactに、このコンポーネントとその子要素が更新された状態で再レンダリングされる必要があることを通知します。

これは、イベントハンドラとサーバーの応答に応じてユーザーインターフェイスを更新するために使用する主な方法です。

コンポーネントを更新するための即時のコマンドではなく、setStateをリクエストと考るとわかりやすいですね。

パフォーマンスを向上させるために、Reactは遅延させてから、1回のパスで複数のコンポーネントを更新します。 Reactは、状態の変更がすぐに適用されることを保証するものではありません。

)