征服期(7)-state

10835 ワード

React テキストリンク

propsは、親コンポーネントがコンポーネントを使用するときに設定した値です.サブエレメントは読み取り専用propsのみで使用できます.porpsを置き換えるには、親エレメントで置き換える必要があります.
stateは、構成部品内部で変更できる値を表します.
関数構成部品はstateを使用します.
クラス構成部品はusStateという関数でstateを使用します.

stateを使用する構成部品(クラス)

Puppy.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    constructor(props) {
        super(props);

        this.state = {
            count: 0
        };
    }

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        const {count} = this.state;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
                <div>{count} 마리가 있습니다.</div>
                <button onClick={() => {
                    this.setState({count: count + 1})
                }}>
                    입양 +1
                </button>
            </div>
        );
    }
}

export default Puppy;

素子に状態を設定する場合は、コンストラクション関数(ジェネレータ)メソッドを使用します.
-コンストラクション関数の作成時にsuper(props)を呼び出す必要があります.
-ジェネレータでthis.状態初期値の設定
- this.stateはオブジェクトタイプ

でなければなりません

this.state値をsetStateで置き換えることができます.ここでcount値を変更

コンストラクション関数からstateの構成部品(クラス)を取り出す

Puppy.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    state = {
        count: 0
    };

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        const {count} = this.state;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
                <div>{count} 마리가 있습니다.</div>
                <button onClick={() => {
                    this.setState({count: count + 1})
                }}>
                    입양 +1
                </button>
            </div>
        );
    }
}

export default Puppy;

コードがより簡潔であることを確認できます!

this.なぜオブジェクトではなくsetStateに関数を渡すのですか?

上のソースにはthisオブジェクトをsetStateに渡しますが、動作は良好です.しかし、下のソースのように、this.オブジェクトをsetStateに渡して2回呼び出し、+2にならず+1のみ実行します.これは、ステータス値を更新すると、ステータスが非同期で更新されるためです.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    state = {
        count: 0
    };

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        const {count} = this.state;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
                <div>{count} 마리가 있습니다.</div>
                <button onClick={() => {
                    this.setState({count: count + 1})
                }}>
                    입양 +1
                </button>
                <button onClick={() => {
                    this.setState({count: count + 1})
                    this.setState({count: count + 1})
                }}>
                    입양 +2
                </button>
            </div>
        );
    }
}

export default Puppy;

オブジェクトではなく関数をsetStateパラメータに渡すPuppyコンポーネント

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    state = {
        count: 0
    };

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        const {count} = this.state;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
                <div>{count} 마리가 있습니다.</div>
                <button onClick={() => {
                    this.setState({count: count + 1})
                }}>
                    입양 +1
                </button>
                <button onClick={() => {
                    this.setState(prevState => {
                        return {
                            count: prevState.count + 1
                        };
                    });
                    this.setState(prevState => ({
                        count: prevState.count + 1
                    }));
                }}>
                    입양 +2
                </button>
            </div>
        );
    }
}

export default Puppy;

「養子縁組+2」ボタンの2つのsetStateの動作は同じです.prevStateは既存の状態を表す
関数型素子は「反応器を操作する技術」8章で説明する

Reference

この問題について(征服期(7)-state), 我々は、より多くの情報をここで見つけました https://velog.io/@orangetreex/React-정복기7-state

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

smgpbiスクリプトバックアップ

macバックアップベリーパイミラー