私の最初の反応プロジェクト＆反応状態5日目＆6日目

何
状態はAObject コンポーネントに属する値を格納する場所.
しかし、オブジェクトは何ですか🤔 ??

だから私たちはvariables , これらはデータ値を格納するためのコンテナです.

オブジェクトも変数ですが、多くの値を含めることができます.
ライク

const car =
{
    color:"Red",
    Model:"3",
    Name:"Tesla"
}

なぜ
しかし、我々はすでに持っているprops では、なぜ我々はState.

小道具はデータを部品に渡すために使用されますが、一度渡されたデータを変更することはできません.

しかし、状態は動的データを格納するために使用されます.

これは、動的なWebアプリケーションを作るのに役立ちます.
また、我々のアプリケーションで何が幸せかを追跡する何かが必要です.
状態はイベントに応答して変更するように設計されています.

uは上記の例では状態の使用を見ることができます.

我々は、ユーザーがログインしているか、ログアウトして、ケースに応じて異なるスクリーンを表示するかどうかを調べるために状態を使用します.
私たちが何かをしている度に、私たちはコンポーネントの状態を変えているread more そして、テキストも拡大します.
また、状態の変更の2つのタイプが

UIロジック→ インターフェイスの状態を変更するとき
閉じるこの動画はお気に入りから削除されています.

ビジネスロジック→ 我々がデータの状態を変えているとき.
閉じるこの動画はお気に入りから削除されています.

ハウ
状態uを使用するには、機能コンポーネントの代わりにクラスコンポーネントを使用します.

反応状態はオブジェクトです

まるでUならthis.state と同じthis.props これはキー値ペアを持つオブジェクトを返します.
コンストラクタ関数の状態を設定/初期化します.

もう一つは、我々の状態を宣言して/初期化しなければならないということです.
ライク

**if u did like this
{this.state}  -> this will give the error 

but if we do like 
{this.props}  -> this will not give any error if there is nothing in that it is not 
rendered.**

コード説明→
それで、コードはこのように見えます👇

constructor(props){
    super(props);
    this.state={
        score:0
    }
}

そこで、私たちはprops 引数として、我々は引数として小道具をスーパーと呼ぶ
それで、このことを説明するために、スーパーの使用を最初に理解しましょう
下のコードを見てください

class Component{
  constructor(){
    console.log('Inside Constructor of Component');
  }
}

class App extends Component{
  constructor(){
    console.log('Inside the Constructor of App');
  }
}

const x = new App();

Uがこれを走らせたとき、エラーは言いますポップアップ.

だから私たちはSuper 派生クラスの機能を使用します.
React State
しかし、なぜ我々はスーパーの引数として小道具を使用する🤔?
Uとして、小道具が事前に宣言されて、コンポーネントを通してアクセス可能であるということを知っているが、それらは建設者の中でアクセスできません.

class ScoreKeeper extends React.Component{
    constrctor{
        super();
        this.state={
            name=**this.props.name**
        }
    }
    render(){
            return (
                <h1>Score : {this.state.score}</h1>
            )
    }
}

uを実行しようとすると、これがエラーcuzを与えるでしょう、小道具は私たちが使うべきであるそれらを使用するためにコンストラクタの中でアクセスできません**super(props) ;**
したがって、コンストラクタの内部で小道具を使う必要があるときには、引数を引数として使うべきではありません.

状態を定義するもう一つの方法

class ScoreKeeper extends React.Component{
    state={
        score:0
    }
    render(){
            return (
                <h1>Score : {this.state.score}</h1>
            )
    }
}

このように定義することもできます

state={
        score:0
}

しかし、これは有効なJavaScriptではありません、Babelは有効なJavaScriptコードでそれを変えます.

設定状態→

これ.setstate ()は、オブジェクトを引数として渡すことを想定しています.また、この関数を渡すこともできます.

また、オブジェクトとして渡されたキーは変更されます.

このプロセスは非同期です→ 手段はすぐにそれをしない.

this.state = {num:0};
this.state = {num:99};
**Don't do like this to change the state**

コンストラクタ関数の中でsetstate ()メソッドを使用しないでください.
例👇

import React, { Component } from 'react'

class Random extends Component {
    constructor(props){
        super(props);
        this.state={num:0}
        this.maketimer();
    }
    maketimer()
    {
        setInterval(() => {
        let rand = Math.floor(Math.random()*this.props.maxNum)
        this.setState({num:rand});
        }, 1000);

    }
    render(){
        return(
            <h1>{this.state.num}</h1>
        )
    }
}

export default Random;

マイファーストプロジェクト
PokeGame 👆
これは2つのpokedexをそれぞれ4 - 4のポケモンを持っているPokeGameプロジェクトです、そして、それは両方のpokedexesのexpを比較して、勝者と敗者を宣言します
ハッピーコーディング!🙂