リアクションリアクション:構成部品とステータス

3359 ワード
React テキストリンク
[参考文献:Doit!クローンコード映画採点Webサービス]

クラス構成部品


クラス構成部品を作成します.
//App.js
import React from 'react';

class App extends React.Component{

}

export default App;
以下はAppクラスです.クラスを記述してコンポーネントを継承します.関数型構成部品は、戻り値としてJSXを返しますが、クラスは構成部品を使用できません.この問題を解決するために、クラス構成部品はrender()関数を使用します.
//App.js
import React from 'react';

class App extends React.Component{
  	render(){
    	return <h1>This is Class_Component</h1>;    
	}
}

export default App;

リアクターはクラスのrender()関数を自動的に実行するので、直接実行しなくても自分で実行します.
動的データを使用するためにクラス素子を使用するために簡単な関数型素子を配置した.動的データを使用するにはstateを使用する必要があります.

state


stateはオブジェクト形式のデータであり、クラスコンポーネントには小文字state={}である.書き上げる.
//App.js
import React from 'react';

class App extends React.Component{
  
  state = {
    count: 0,
  };
  
  plus = () => { this.setState({ count : this.state.count+1})};
  
  minus = () => { this.setState({ count : this.state.count-1})};
  
  render() {
    return (
      <div>
    	  <h1>Count : {this.state.count}</h1>
        <button onClick={this.plus}>Plus</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;
上のコードによると、stateにはcountというキーがあり、プラス記号とマイナス記号ボタンでcountを追加する関数を呼び出します.
  • state.count:ステータスのcountキー値を取得します.
  • setState():非同期でステータスを変更します.
    • setState()関数が機能すると、ステータスが変更され、render()関数が自動的に実行されて画面が更新されます.
    運転画面は以下の通りです.
    リカバリ-restore archivelog(転載)
    [ Vue.js ] what about Vue.js? ( using Vscode )