React
コンポーネントライフサイクルの反動
サーチ…
前書き
ライフサイクル・メソッドは、コードを実行し、コンポーネントのさまざまな時点でコンポーネントとやりとりするために使用されます。これらのメソッドは、コンポーネント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