[TIL]21808-リバースクローン符号化

Stateとクラス構成部品

クラスとpropsの概念をクローン符号化3,4章で学習した.
また,propsやstateはreactionの中で最も重要な概念ともいえるので,単独で整理して議論する.
stateとpropsはいずれもデータ処理に用いる概念であるが,大きな違いは以下の通りである.

props:不変データ(可変データ).

state:動的データの処理に使用されます.

01.stateを使用した数値増減機能の作成

./src/App.js에서 

import React from 'react';

class App extends React.Component{

	}

export default App;

クラス構成部品にするには、「アプリケーションクラスは、リアクターが提供するコンポーネントクラスを継承する必要があります.」
非関数のクラス形式のアプリケーションコンポーネントについては,戻り文は使用できないし,関数形式のアプリケーションコンポーネントのようにJSXを返すこともできない.
クラス構成部品はrender()関数を使用してJSXを返します.

./src/App.js에서 

import React from 'react';

class App extends React.Component{    
	render() {
    	return <h1> I'm a class component </h1>
      	    }
	}

export default App;

関数型構成部品は戻り文からJSX、クラス構成部品はrender()関数からJSXを返します.その後、反応器はクラス素子のrender()関数を自動的に実行します.クラスコンポーネントを使用する理由は「stateを使用する」ことであることを忘れないでください.
★stateを使用するには、クラスエレメント内で、小文字でstateを書く必要があります.**

import React from 'react';

class App extends React.Component {
    state = {
        count:0,
    };

    add=()=>{
        console.log('add'); // count state는 아직 변경하지 않았으므로 함수 동작만 확인할 수 있다. 
    };

    minus=()=>{
        console.log('minus');
    };

    render(){
        return(
            <div>
                <h1> The number is : {this.state.count} </h1>
                <button onClick={this.add}>ADD</button>
                <button onClick={this.minus}>Minus</button>
            </div>
        )
    }
}

export default App

クラス構成部品

を作成

render()関数

を使用
定義

ステータス

stateにcount値

を追加および使用

ボタンを押してcount state値

を変更します.

add()およびminus()関数

を作成

ボタンを押してonClick属性を追加し、操作

を行います.

数値増分機能の作成

ステータスが変更されると、元のリアクターはrender()関数を再実行し、変更されたステータスを画面に出力します.ただし、stateを直接変更するとrender()関数は再実行されません.
したがって、JavaScriptとは異なります.state.count = this.state.count+1またはthis.state.count++などのコードは使用できません.間接的にステータスを変更する方法を使用する必要があります.
stetState()関数の使用

class App extends React.Component {
    state = {
        count:0,
    };

    add=()=>{
        this.setState({count:1});
    };

    render(){
        return(
            <div>
                <h1> The number is : {this.state.count} </h1>
                <button onClick={this.add}>ADD</button>
            </div>
        )
    }
}

[ The number is : 0 ]
1.setState()関数に新しい状態を渡します.
2.ステータス更新後
3.render()関数が自動的に実行されます.
[ The number is : 1 ]
4.画面更新.

import React from 'react';

class App extends React.Component {
    state = {
        count:0,
    };

    add=()=>{
        this.setState(current=>({
            count:current.count+1,
        }));
    };

    minus=()=>{
        this.setState(current=>({
            count:current.count-1,
        }));
    };

    render(){
        return(
            <div>
                <h1> The number is : {this.state.count} </h1>
                <button onClick={this.add}>ADD</button>
                <button onClick={this.minus}>Minus</button>
            </div>
        )
    }
}

export default App

stateは、ダイナミックデータを使用する場合に導入する必要がある要素です.
setState()関数は、変更された状態のデータのみを更新します.

構成部品の生涯を知る