Reactjs-component-life-cycle

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

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

ライフサイクルメソッド

• componentWillMount は、サーバー側とクライアント側の両方で、レンダリングの前に実行されます。
• componentDidMount は、クライアント側でのみ最初のレンダリング後に実行されます。 これは、AJAXリクエストとDOMまたは状態の更新が発生する場所です。 このメソッドは、他のJavaScriptフレームワークとの統合、および setTimeout や setInterval などの遅延実行を伴う関数との統合にも使用されます。 これを使用して状態を更新し、他のライフサイクルメソッドをトリガーできるようにします。
• componentWillReceiveProps は、別のレンダリングが呼び出される前に小道具が更新されるとすぐに呼び出されます。 状態を更新したときに、 setNewNumber からトリガーしました。
• shouldComponentUpdate は true または false 値を返す必要があります。 これにより、コンポーネントが更新されるかどうかが決まります。 これはデフォルトで true に設定されています。 state または props が更新された後、コンポーネントをレンダリングする必要がないことが確実な場合、 false 値を返すことができます。
• componentWillUpdate はレンダリングの直前に呼び出されます。
• componentDidUpdate はレンダリング直後に呼び出されます。
• componentWillUnmount は、コンポーネントがdomからマウント解除された後に呼び出されます。 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}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {
      console.log('Component WILL RECIEVE PROPS!')
   }
   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);

最初のレンダリングの後、次の画面が表示されます。

React Component Lifecycle Initial Screen