React Stateの状態とライフサイクルの実装方法

<div id="アプリ"></div>
<script type="text/babel">
  var ReactDiv = document.getElementById('app');
  関数 GetReactComp(){
    return <p>私はReactコンポーネントです</p>
  }
  const hellocomp = < GetReactComp /> //最初の文字を大文字にする const reactSpan = (
    <span>
      { hellocomp }
    </span>
  ）
  ReactDOM.render(reactSpan、ReactDiv) は、
</スクリプト>

<div id="クラス"></div>
<script type="text/babel">
  var reactDiv1=document.getElementById('class');
  //クラスコンポーネントを定義する class MyReactComp extends React.Component{
    与える（）{
      戻る （
        <h2>クラスコンポーネント</h2>
      ）
    }
  }
  //クラスコンポーネントを使用する const testDiv = (
    <div>{<MyReactComp/> </div>
  ）
	//ReactDOM.render(testDiv,reactDiv1) をマウントします
</スクリプト>

<div id="アプリ"></div>
<script type="text/babel">
  var reactDiv = document.getElementById('app');
  クラスReactClassCompはReact.Componentを拡張します。
    与える（）{
      戻る （
      <div>
      <p>ユーザー名: <input type="text" value={ this.props.name }/></p>
      <p>性別: <input type="text" value={ this.props.gender }/></p>
      </div>
      ）
    }
  }

  ReactClassComp.defaultProps={
    名前:「劉備」、
    性別: '男性'
  }
  定数 reactp = (
    <span>
      {<ReactClassComp />}  
    </span>
  ）
  ReactDOM.render(reactdiv,reactdiv)
</スクリプト> 

コンストラクタ(props){
	スーパー(小道具);
		この状態 = {
			日付:新しい日付()
		}
		this.handleShow = this.handleShow.bind(this)
	
}

コンポーネント更新(前のプロパティ){
	if(this.props.userID !== prevProps.userID){
		this.fetchData(this.props.userID)
	}
}

<div id="アプリ"></div>
<script type="text/babel">
  var reactDiv = document.getElementById('app')
  //クラスコンポーネントMyStateCompを定義する 
  クラスMyStateCompはReact.Componentを拡張します。
    //コンストラクタ コンストラクタ(props) {
      スーパー(小道具); 
      // this.state を通じて内部的に状態を初期化します this.state = {
        日付:新しい日付()、
        表示:false、
        テキスト:'表示'
      }
      // インスタンスをイベント処理関数にバインドします this.handleShow = this.handleShow.bind(this)
    }
    //サブスクリプションを追加するcomponentDidMount() {
      this.timerID = setInterval(()=>this.tick(),1000)
    }
    //時間関数 tick() {
      this.setState({ //setStateはコンポーネントの状態を更新します
        日付:新しい日付()
      })
    }
    //インスタンスの表示、非表示 handleShow() {
      this.setState(state=>({
        表示: !state.show,
        テキスト: !state.show?'非表示':'表示'
      }))
    }
    //コンポーネントのアンインストール: タイマーをクリアするcomponentWillUnmont() {
      クリア間隔(this.timerID)
    }
    
    与える（） {
      isShow を this.state.show とします。
      要素をletします。
      if(isShow){
        要素 = <h2 >{this.state.date.toLocaleTimeString()}</h2> 
      }それ以外{
        要素 = null
      }
      戻る （
        <div>
          <button onClick={this.handleShow}>{this.state.text}時間</button>
          {要素}
        </div>
      ）
    }
  }
  定数反応スパン = (
    <span>
      {<MyStateComp/> }  
    </span>
  ）
  ReactDOM.render(reactSpan、reactDiv) は、
</スクリプト>