実例はReactコンポーネントのライフサイクルを説明します。

この章では、Reactコンポーネントのライフサイクルについて説明します。
コンポーネントのライフサイクルは三つの状態に分けることができます。

Mounting：リアルDOM

を挿入しました。

Updating：再レンダリングされています。

Unimounting：実際のDOMに移動しました。

ライフサイクルの方法は：

componentWillMountはレンダリングの前に呼び出し、クライアントもサービスしています。

component DidMount：最初のレンダリングの後に呼び出すと、クライアントのみになります。その後、コンポーネントは対応するDOM構造を生成し、this.getDOM Node()によってアクセスすることができる。他のJavaScriptフレームと一緒に使用したいなら、この方法でsetTimeout、set Interval、またはAJAX要求などの操作を呼び出すことができます。

componentWillreceive Propsは、コンポーネントが新しいpropを受信したときに呼び出しられます。この方法はrenderを初期化する際には呼び出されない。

shuldComponentUpdateはブール値を返します。コンポーネントが新しいpropsまたはstateを受信すると呼び出しられます。初期化時やforceUpdateを使用する場合は呼び出しられません。コンポーネントの更新が必要でないことを確認した時に使うことができます。

componentWillUpdateは、コンポーネントが新たなpropsまたはstateを受信したが、レンデがまだいないときに呼び出される。初期化時には呼び出されません。

component DidUpdateはコンポーネントの更新が完了したらすぐに呼び出します。初期化時には呼び出されません。

componentWillUnmountは、コンポーネントがDOMから取り除かれる前に直ちに呼び出される。

これらの方法の詳細な説明は、公式文書を参照することができる。
実例
以下の例はハローコンポーネントをロードした後、componentDidMount方法によって、コンポーネントの透明度を100ミリ秒ごとに再設定し、再レンダリングする。

class Hello extends React.Component {
 
 constructor(props) {
   super(props);
   this.state = {opacity: 1.0};
 }
 
 componentDidMount() {
  this.timer = setInterval(function () {
   var opacity = this.state.opacity;
   opacity -= .05;
   if (opacity < 0.1) {
    opacity = 1.0;
   }
   this.setState({
    opacity: opacity
   });
  }.bind(this), 100);
 }
 
 render () {
  return (
   <div style={{opacity: this.state.opacity}}>
    Hello {this.props.name}
   </div>
  );
 }
}
 
ReactDOM.render(
 <Hello name="world"/>,
 document.body
);

実行結果

以下の例はstateを初期化し、setNewnumberはstateを更新するために用いられる。すべてのライフサイクルはコンテントコンポーネントの中にあります。

class Button 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 RECEIVE 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>
   );
  }
}
ReactDOM.render(
  <div>
   <Button />
  </div>,
 document.getElementById('example')
);

実行結果

以上は実例でReactコンポーネントのライフサイクルの詳細を説明しました。Reactコンポーネントのライフサイクルに関する資料は他の関連記事に注目してください。