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。すべてのライフサイクルメソッドは、コンテンツコンポーネント内にあります。

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);

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