属性とステータス

オブジェクトpropertyであるため、画面に直接テキストとして表示することはできません.
したがって、文字列形式に変換する必要があります.
StringとObject.エントリを使用します.
コンポーネントに入力した属性はオブジェクトです.
String(Object.entries)としても使用できます.
protTypeで定義する場合、objValue:PropType.shape({
name: PropTypes.string,
age: PropTypes.number,
}),
}
一緒に使用すると、オブジェクトのリストを一目で簡単に表示できます.

必要なプロパティの使用

propertyタイプを指定する場合は、isRequiredオプションを指定するだけです.
requiredStringValue: PropTypes.string.isRequired;
コード#コード#
import logo from './logo.svg';
import './App.css';
import TodaysPlan from './03/TodaysPlan';
import PropsComponent from './03/PropsComponent';
import ChildComponent from './03/ChildComponent';
import BooleanComponent from './03/BooleanComponent'
import ChildComponent2 from './03/ChildComponent2';
function App() {
return (
//
/*

<div>
  <div><b>지루할 때: </b><BooleanComponent bored /></div>
  <div><b>즐거울 때: </b><BooleanComponent /></div>


</div>

*/

/*

<ChildComponent
boolValue={true}
numValue={1}
arrayValue={[1,2,3]}
objValue={{name: '제목', age: 30}}
nodeValue={<h1>노드</h1>}
funcValue={() => {console.log('메시지');}}

/>
/
/

こんにちは.

    </div>   
</div>

*/
);
}
export default App;
App.js
import React from 'react';
import PropTypes from 'prop-types';
class ChildComponent2 extends React.Component {
render() {
const {
objValue,
requiredStringValue,
} = this.props;

    return (
      <div>
          <div>객체값: {String(Object.entries(objValue))}</div>
          <div>필수값: {requiredStringValue}</div>
      </div>  


    );
}

}
ChildComponent2.propTypes = {
objValue: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number,

}),
requiredStringValue: PropTypes.string.isRequired,

}
export default ChildComponent2;
ChildComponent2.jsx
classのdefaultPropsオプションを使用してデフォルト値を指定できます.
? 条件文はfalseとundefinedを同じと見なし、===比較文は異なる.
したがって、混同を避けるためには、デフォルト値を事前に指定することが望ましい.
defaultPropsの例の指定
DefaultPropsComponent.defaultProps = {
boolValue: false,
};
サブアイテム構成の使用
JSXでは、寸法式を使用できます.したがって、サブプロパティは、構成部品のサブアイテムに配置されたノードとして使用できます.

コンポーネントのラベルをノードと呼びますか?

管理構成部品ステータス

(ステータス)

state:主に構成部品の状態を管理する必要がある場合に使用します.
コンポーネントで値を変更する必要がある場合(たとえば、ショッピングモールでアイテムの数を入力したり、コメントを入力したりするなど)に使用できます.
通常はアクティビティとともに使用されます(たとえば、ボタンを押すと色を変更したり、フォントの形状を変更したりすることができます).
*スーパーを作るときの道具はthisです.道具は使いませんか.
state関数の注意点:
ジェネレータを使用して初期化する必要があります.
ステータス値を変更する場合はsetState()関数を使用する必要があります.
setState()関数は非同期で処理され、setState()コードが実行された後に接続された関数の場合にスクリーン同期が行われる.
state値は直接変更できません.render()関数を使用してスクリーンを描画する時間は、反応エンジンによって決定されます.
*setState()関数のパラメータを関数に渡すことで、前の状態を読み取るプロセスを省略できます.
->前の状態がどのプロセスにどのように伝達されたのか分かりません.
this.forceUpdate()(クラスを表します.)

構成部品ライフサイクル:構成部品の作成から消滅までのプロセス.

ライフサイクル関数:ライフサイクル関数はリトラクトエンジンによって自動的に呼び出され、開発者は勝手に呼び出すことができません.
コンストラクション関数:最初に作成されたときに呼び出されるのは1回だけで、常にsuper()関数を含む必要があります.初期化プロセスとライフサイクルステータスの重要なプロセスが含まれています.
render関数:データが変更されて新しい画面を描画する必要がある場合に自動的に呼び出される関数.
静的getDerivedStateFromProps(props,state)関数
静的関数なので、関数ではthis.propsなどは属性やステータス値にアクセスできません.
componentDidMount()関数
render()関数は、画面にJSXを描画して呼び出される関数です.
構成部品を画面に含めて実行する操作を入れます.
shouldComponentUpdate(nextProps, nextState)