React_State & Props

reactを使用して画面を構成部品に分割します.
Nav、Main、Footerに分類される場合があります.また、Mainにはプロファイルコンポーネント、製品説明コンポーネントがある場合があります.
従って親素子の下の子素子が属する構成となる.
親と子供の間でデータを交換しなければならない.
PropsとStateはReactでデータを管理するために必要な要素です.
正しく理解して使うことが大切です😶

State

stateは、素子自体が持つ状態値です.
関数に変数を宣言すると、その変数は関数自身が所有および管理する値となり、stateは画面に表示する構成部品のステータス値を持つオブジェクトです.
独自の値であるため、構成部品内で直接値を変更できます.

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      weather: 'HOT'
    };
  }
  
  render(){
    return <h1>Today's weather is {this.state.weather}!</h1>;
    // print: Today's weather is HOT!
  }
}

まずこれ.stateは初期値を宣言します.
this.stateはオブジェクトで、key: value形式で書くことができます.
素子から状態値を取得する場合、this.state.key값this.state.key값を値とするセルは、state値に基づいて自分の値を決定するので、state値が変更されると、値は一緒に変更されます.
では、宣言のステータス値をどのように変更しますか?

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      weather: 'HOT'
    };
  }
  
  handleWeather = () => {
    this.setState({
      weather: 'COLD'
    })
  }
  
  render(){
    return (
      <h1>Today's weather is {this.state.weather}!</h1>
      <button onClick={this.handleWeather}>Change Weather</button>
    );
    
  }
}

state値は、this.setState関数でキーの値を再指定することで変更できます.this.setState起動時に構成部品が再運転されるrender関数.変更したstate値を代入し、変更した内容で画面を再描画します.
state値を呼ぶとき{this.state.~~~}関数を呼ぶとき{this.함수명}このまま続いているのが見えますthisthis「私が所属しているこの素子」は簡単だと思います.
Ex)Profile素子では、
Profileコンポーネント自体を指します.

props

propsは、親エレメントが子エレメントに渡されるプロパティです.
すべての構成部品に組み込まれたオブジェクト.
値を自由に変更できるstateとは異なり、
props親コンポーネントから渡されるため、値は変更できません.
propsにより、親コンポーネントは、自分のステータス値、イベントなどをサブコンポーネントに渡すことができます.

// Main.js
import React from 'react';
import Comment from './Comment.js';

class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      userID: 'Quokka'
    }
  }
  
  render() {
    return(
      <div>
        <h1>Comment List</h1>
        <ul>
      	  <Comment userID={this.state.userID}/>
        </ul>
      </div>
    );
  }
}

export default Main;

上のコードはMainですjsの状態値——this.handleClickCommentコンポーネントの読み込み時に渡す.

// Comment.js
import React from 'react';

class Comment extends React.Component {
  render() {
    console.log(this.props);
    // 
    return <li>I'm {this.props.userID}</li>
  }
}

export default Comment;

Main.js譲渡のuserIDComment.jsで確認できるのはuserIDComment.jsのprops値を{this.props.userID}と確認します.console.log(this.props)客体に移行していることがわかる.
上記のように、親コンポーネントはstate値だけでなく、関数、イベントなどを渡すことができます.

構造分解の割り当て

構造分解分配はES 6の出現に伴って用いられる方式である.
オブジェクトとその配列の値を取得すると、オブジェクトまたは配列を変数に分解できます.
コードの重複を減らし、簡潔に表現します.

let arr = ['Poo', 'Robbin'];
let [first, second] = arr;
// first = 'Poo', second = 'Robbin' 

対策を講じて開発を進めていくと、引き続き繰り返しuserIDthis.props.~~~直接使っても大丈夫ですが、コードを減らしたり、可読性を高めたりするには、構造分解配分方式を使用します.

const isSwitchOn = this.state.isSwitchOn;
const color = this.state.color;

上の2行のコード

const {isSwitchOn, color} = this.state

これで1行で表現できます.

の最後の部分

Reactを使うには2つの難点があります.

必要なelementをインポートし、eventまたは関数を直接elementに割り当てます.
Vanilla Jsとは異なり,Reactは素子にイベントと関数を与える.
(?)それは難しいです.

親と子供の間でどのようにデータを交換しますか?
ある時点で、親と子供の間にデータ移動が必要です.
作成するデータ/関数/論理はどのコンポーネントに適していますか?

要するに、コードを書くときは、自分の信念やルールを生み出し、慣れていくために、より多くの反応を書く必要があると思います.
今回はpropsとstateの概念を理解して、2番の悩みに対する疑問が緩和されたようです.
そのためか、Instagramのコメント付加機能もデータを伝える部分が詰まっていて、会話を聞いてすぐに解決できます.😁