反応における国家管理

こんにちは開発者!
このポストでは、我々は反応JSで州管理を学ぶつもりです.

どのような状態ですか？

すべての反応コンポーネントは、UIがどのように見えるかを説明するJSXを返します.The state 予約された単語は反応します.したがって、状態は、変更することができますアプリケーションの部分を表すオブジェクトです.
反応中v16.8 フックは、機能コンポーネントの状態や他の反応機能を使用できるように導入されます.

プロジェクトの設定

まず、反応アプリを作成してみましょうcreate-react-app . を作成するアプリは、反応アプリを構築するための公式推奨ツールです.あなたが持っている必要がありますNode >= 8.10 and npm >=5.6 あなたのマシンで.プロジェクトを作成して実行するには、次のコマンドを入力します

npx create-react-app my-app
cd my-app
npm start

このチュートリアルでは、我々はインクリメントやデクリメントカウントすることができますシンプルなカウンタアプリを構築する予定です.

今すぐコードにジャンプしましょう!
私たちのカウンタアプリの基本的な構造を作成してみましょう.
src/appjs

import React, { Component } from "react";
import "./App.css";

class App extends Component {
    onIncrementHandler = () => {

    };

    onDecrementHandler = () => {

    };

    render() {
        return (
            <div className="App">
                <h3 className="counter">0</h3>
                <div className="container">
                    <button onClick={this.onIncrementHandler}>Increment</button>
                    <button onClick={this.onDecrementHandler}>Decrement</button>
                </div>
            </div>
        );
    }
}

export default App;

我々は、アプリです.CSSは、我々のカウンタアプリのようにいくつかのスタイルを追加してみましょう.
src/appCSS

.App {
    height: 100vh;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.counter{
    font-size: 150px;
    font-weight: 400;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  width: 15%;
  margin: 0 30px;
  font-size: 30px;
  color: white;
  background-color: black;
  border: none;
  transition: transform .2s;
  cursor: pointer;
}

button:hover {
  border: 1px solid black;
  color: black;
  background-color: white;
  transform: scale(1.2);
}

カウンタの値を0にハードコードしていることを確認したに違いない.では、カウンタ値の操作方法🤔??
カウンタの値を操作するには、状態を導入します.状態は、コンポーネントに属するプロパティ値を格納するJavaScriptオブジェクトです.コンポーネントの状態が変更されると、コンポーネントのUIも変わります.
クラスへのローカル状態の追加

state = {
    counter: 0
}

カウンタを動的に置換する<h3 className="counter">0</h3> with

<h3 className="counter">{this.state.counter}</h3>

正しく状態を使うsetState() 初期状態設定後に状態を更新する正当な方法です.

// Right
this.setState({comment: 'Hello World!'});

ここでは、オブジェクトを渡すsetState() . オブジェクトは、この場合、コメントの値です.反応はこの値をとり、それを必要とするオブジェクトにそれをマージします.
直接状態を変更しないでください.我々は常に無期限に状態を更新する必要があります.

// Wrong
this.state.comment = 'Hello World';

以前の状態を使用する必要がある場合、上記のメソッドは動作しません.したがって、上記のアプローチの代替案は以下の通りです.

this.setState((prevState) => {
    counter: prevState.counter + 1
});

今すぐ私たちの状態を更新することができますonIncrementHandler and onDecrementHandler .

onIncrementHandler = () => {
        this.setState((prevState) => ({
            counter: prevState.counter + 1,
        }));
};

onDecrementHandler = () => {
        this.setState((prevState) => ({
            counter: prevState.counter - 1,
        }));
};

状態管理の最終更新コードは次のようになります.

import React, { Component } from "react";
import "./App.css";

class App extends Component {
    state = {
        counter: 0,
    };

    onIncrementHandler = () => {
        this.setState((state) => ({
            counter: state.counter + 1,
        }));
    };

    onDecrementHandler = () => {
        this.setState((prevState) => ({
            counter: prevState.counter - 1,
        }));
    };

    render() {
        return (
            <div className="App">
                <h3 className="counter">{this.state.counter}</h3>
                <div className="container">
                    <button onClick={this.onIncrementHandler}>Increment</button>
                    <button onClick={this.onDecrementHandler}>Decrement</button>
                </div>
            </div>
        );
    }
}

export default App;