State

素子の状態値👉 画面上のUI情報を記憶するオブジェクト(写真、タイトル、価格等)

いくらでも変更できます.

import React from 'react';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      titleColor: "red",
      subTitleColor: "blue",
    };
  }
  
  changeTitleColor = () => {
    this.setState({ titleColor: "green", })
  }
  
  render() {
    const { titleColor, subTitleColor } = this.state; 
    const { changeTitleColor } = this;
    return (
      <div>
      	<h1 style = {{ color: titleColor }}>Class Component | state</h1>
	 <button onClick={ changeTitleColor }>색 바꾸기</button>
      </div>
    );
  }
  
  export default Parent;

レンダー時に必要な構成部品に

ステータスを追加し、他の構成部品を使用する場合は、親の近くに配置して使用できます.

適切な構成要素がなければ、製造および使用される.

非構造化生糖(構造分解分配)

オブジェクトまたは配列を使用してこの構造を破ると、

const obj = {
	name: "tony",
    age: 18,
   }; 
const { objName, objAge } = obj;
objName; // 'tony'
objAge; // 18

Props

構成部品の属性値👉 親コンポーネントから渡されたデータを持つオブジェクト.
(ex:stateのステータス値、イベントハンドラ)

import React from 'react';

class Child extends React.Component {
  render() {
		// console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}

export default State;

propsは、属性値だけでなく、親オブジェクトの関数も受け入れることができます.

サブ関数は、関数ではなく、関数が親関数から返され、関数の値が親関数から返され、値が親関数から返され、サブ関数に再び値が割り当てられます.

したがって、値を兄弟要素から交換できない場合は、親コンポーネントに値と関数を作成して接続し、変更したデータを相互に与えるストリームと見なす必要があります.