ReactJS コンポーネントライフサイクル

本章では、コンポーネントのライフサイクルメソッドについて議論します。

ライフサイクルメソッド

• componentWillMount サーバーサイドおよびクライアントサイドでレンダリング前に既に実行されています。

• componentDidMountクライアント側で最初のレンダリングが実行された後に実行されます。AJAXリクエストやDOMおよび状態の更新を行うべき場所です。このメソッドは、他のJavaScriptフレームワークおよび遅延実行されるどんな関数（例えばsetTimeoutまたは）統合setIntervalを使用して、他のライフサイクルメソッドをトリガーするため、ステートを更新しています。

• componentWillReceivePropsプロップスが更新された後すぐに呼び出され、次のレンダリングエンジンを呼び出します。現在、setNewNumberステートが更新されたときにトリガーされます。

• shouldComponentUpdate応じて返却するべきです。trueまたはfalse値。これはコンポーネントが更新されるかどうかを決定します。trueデフォルトでは設定されます。もしコンポーネントが更新後に表示されないことを確認している場合は、stateまたはprops更新後に表示される場合、false値。

• componentWillUpdate レンダリング前に呼び出されます。

• componentDidUpdate レンダリング後すぐに呼び出されます。

• componentWillUnmountDOMからコンポーネントをアンマウントした後に呼び出されます。現在、コンポーネントをアンマウントしています。main.js。

以下の例では、stateコンストラクタ内で初期値を設定します。以下の例では、setNewnumber更新に使用されるstateすべてのライフサイクルメソッドはContentコンポーネント内に含まれています。

App.jsx

import React from 'react';
class App extends React.Component {
　　　constructor(props) {
　　　　　　super(props);
　　　　　　
　　　　　　this.state = {
　　　　　　　　　data: 0
　　　　　　}
　　　　　　this.setNewNumber = this.setNewNumber.bind(this)
　　　});
　　　setNewNumber() {
　　　　　　this.setState({data: this.state.data　+　1)
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button onClick={this.setNewNumber}>増加</button>
　　　　　　　　　　　　<Content myNumber={this.state.data}>/Content>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component {
　　　componentWillMount() {
　　　　　　console.log('コンポーネントがマウントされる準備中です！')
　　　}
　　　componentDidMount() {
　　　　　　console.log('コンポーネントがマウントされました！')
　　　}
　　　componentWillReceiveProps(newProps) {　　　　
　　　　　　console.log('コンポーネントがプロップスを受け取る準備中です！')
　　　}
　　　shouldComponentUpdate(newProps, newState) {
　　　　　　return true;
　　　}
　　　componentWillUpdate(nextProps, nextState) {
　　　　　　console.log('Component WILL UPDATE!');
　　　}
　　　componentDidUpdate(prevProps, prevState) {
　　　　　　console.log('Component DID UPDATE!')
　　　}
　　　componentWillUnmount() {
　　　　　　console.log('Component WILL UNMOUNT!')
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h3>{this.props.myNumber}</h3>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/, document.getElementById('app'));
setTimeout(() => {
　　　ReactDOM.unmountComponentAtNode(document.getElementById('app'));},　10000);

初期レンダリングの後、以下のスクリーンを取得します。