構成部品

構成部品を宣言する方法は2つあります.

系素子

関数型素子

クラス構成部品

import React from 'react';
import './App.css';

class App extends Componet {
	reder(){
		const name = 'react';
		return <div className="react">{name}</div>
	}
}

export default App;

ステータス機能とライフサイクル機能

ランダムメソッド

を定義できます.

reder関数が必要です.*コンテンツ

が必要です.

では、何を書きますか。

より良い関数形式=宣言しやすく、Hooks機能で既存の問題を解決

エクスポートモジュール=export

他のファイルからファイルをインポートできます

読み込みモジュール=import

他のファイルのインポート

Props

構成部品のプロパティを設定するときに使用する要素
props値は親コンポーネントによって設定されます(操作).

JSXでpropsをレンダリングする

MyComponent.js

import React from 'react';

const MyComponet = props => {
	return <div> 안녕하세요, 제이름은 {props.name} 입니다. </div>
};

exprot defalt MyComponent;

(子)構成部品でpropsをnameに設定するには
{props.name}と呼ぶことができます.
propsを指定する方法はいろいろあります
多くの場合、非構造的な割り当てを学習します.これは後で処理します.
非構造割当

構成部品の使用時にprops値を指定する

App.js

import React from 'react';
import MyComponet from './MyComponent'

const App = () => {
	return <MyComponet name = "React" />;
};

exprot defalt App;

では、(親)構成部品がprops値をname=「値」に指定した場合.
部品の支柱.nameの値決定

propsデフォルト:defaultProps

import React from 'react';

const MyComponet = props => {
	return <div> 안녕하세요, 제이름은 {props.name} 입니다. </div>
};

MyComponet.defaultProps = {
	name : '기본이름'
};

exprot defalt MyComponent

サブアセンブリ
構成部品名.defaultProps={porpsのProperty:[デフォルト]};
君が望むなら
既定値は.

タグ間のコンテンツの子を表示

(子)構成部品で{props.children}を実行すると、
親ラベル間の内容を表す

非構造化割り当て構文によるprops内部値の抽出

非構造化配分とは?

オブジェクトから値を抽出する構文

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

上記の例では、値にアクセスすると、ヒーロー~~を続行します.やっかいなことがある

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};
// ------ 방법 1 ------ //
function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}
// ------ 방법 2 ------ //
function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

こう改めれば簡単だ
すなわち

const { alias, name, actor } = hero;

このセクションでは、オブジェクトの値を抽出し、新しい定数に挿入します.
非構造配分法を使用すると、非常にきれいに使用されます.
MyComponent.js(非構造化生糖法)

import React from 'react';

const MyComponet = ({name}) => {
	return <div> 안녕하세요, 제이름은 {name} 입니다. </div>
};

MyComponet.defaultProps = {
	name : '기본이름'
};

exprot defalt MyComponent

proptypeでpropsを検証する

構成部品に必要なpropsを指定するか、タイプを指定します.

import React from 'react';
import PropTypes from 'prop-types';

const MyComponet = ({name}) => {
	return <div> 안녕하세요, 제이름은 {name} 입니다. </div>
};

MyComponet.defaultProps = {
	name : '기본이름'
};

MyComponet.propsTypes = {
	name : PropsTypes.strting
};
exprot defalt MyComponent

PropType from"prop-types"

をインポート

MyComponet.propsTypes = {
name : PropsTypes.strting
}; 設定

(親)構成部品で設定できるprops値はstringでなければなりません

isRequiresを使用して必要なprotTypeを設定する

proptypeを指定しないときに警告するメッセージ

PropsTypes.strtingの後ろisrequiredを行います.

対応するpropsを(親)構成部品に設定する必要があります.

≪ステータス｜Status｜emdw≫

構成部品の内部で変更できる値.
すなわち、propsは親コンポーネント設定の値であり、(子)コンポーネントはpropsの読み取りにのみ使用できます.
(サブアイテム)コンポーネントではpropsを変更することもできます.
種類
ステータス、

クラスの構成部品を含む

関数型素子のユーザ状態関数

クラス構成部品のステータス

クラスコンポーネントでstateを設定する46 constructorメソッドの作成と設定

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

super(props)とは、親クラスの継承を意味し、クラスComponentのコンストラクション関数

を呼び出すことができるようになりました.

this.state値の初期値

を設定する

render() {
        const { number } = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button
                    onClick={() => {
                        this.setState({ number: number + 1 });
                    }}
                >+1</button>
            </div>
        )
    }

の現在のステータスを問い合わせるために、this.stateクエリー

の設定

イベント設定関数を追加する場合は矢印関数、

を使用します.

州の状態を変えたのはsetState,

すなわち,クラス要素は1である.コンストラクション関数設定(super,state初期値)2.this.setsStateで操作

stateオブジェクトに複数の値が含まれている場合

this.stateオブジェクトに値

を追加できます.

コンストラクション関数からstateをポップアップ

コンストラクション関数メソッドを使用せずにステータス初期値を設定できます.

import React, { Component } from 'react'

export class Counter extends Component {
    state = {
        number: 0
    };

    render() {
        const { number } = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button
                    onClick={() => {
                        this.setState({ number: number + 1 });
                    }}
                >+1</button>
            </div>
        )
    }
}

export default Counter

thisを使用せず、stateオブジェクト

のみを作成

クエリーは同じです.

this.オブジェクトではなくsetStateに関数パラメータを渡す

this.setStateは非同期でステータスを更新します(すぐには変更しません)
オブジェクトの代わりに関数を使用できます

this.setState((prevState, props) => {
return{
		// 업데이트 내용
})

の前置状態は

である.

道具とは、現在持ち歩いている道具のこと.

の値を更新後、特定の操作を行うには、(コールバック)propsで

を矢印関数としてロールバックすることができる.

関数構成部品でのusStateの使用

本来stateは利用できませんが、Hooksで可能にします
使用可能なuseState
使用方法を議論する前に、非構造化配列割り当てを学習します.

非構造化配分とは?

オブジェクトの非構造配分と同様
すなわち,配列中の値を容易に抽出する方法である.
オブジェクト構造化割り当てと同様に、配列にも使用できます(上のオブジェクト非構造化割り当てを参照).

useStateの使用

useStateという名前の関数を使用します.

第1配列(state)と第2配列(stateを操作する関数=setter)を割り当てる方法

.

usStateに渡すパラメータ設定stateの初期値

状態値の形式は自由な

である.

import React, { useState } from 'react';

const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('안녕하세요');
    const onClickeave = () => setMessage('안녕히가세요');
    return (
        <div>
            <button onClick={onClickEnter}> 입장 </button>
            <button onClick={onClickeave}> 퇴장 </button>
            <h1>{message}</h1>

        </div>
    )
}

export default Say;

usStateは

を複数回使用できます.

stateの使用上の注意

state値の変更はsetter関数(2番目の配列)でなければなりません.
配列やオブジェクトを更新する必要がある場合は、どうすればいいですか?
=配列またはオブジェクトをコピーとして保存し、そのコピーをsetter関数に更新