1. Hook

React公式ドキュメントでは、Hookは次のように定義されています.
Hookは、関数要素にReact Stateとライフサイクル機能(ライフサイクル特性)を「バインド」できる関数です.
定義から、class素子ではなく関数素子でのみ動作することがわかります.
「hook(フック、フック)」という言葉の意味で、コンポーネント以外の機能や論理などを掛けることでキャラクターをインポートします.
Reactは、useStateのようないくつかの内蔵フックを提供する.
EJ Fecial:Reactが提供してくれた素子が使える内蔵方法だったんですね...

Hookのルールを使う

1-1. 最上位レベルでのみhookを呼び出す必要があります。

レベルはブロック単位で、コンポーネントを定義するコードの中で最も外側のレベルです.つまり、焼いて食べても、煮て食べても、割り当てても、最上位レベルでhookを呼び出すしかありません.

1-2. React関数構成部品でのみHookが呼び出されます。

2. Props

property(プロパティ)は、その名の通り、素子のプロパティ値です.
親構成部品から子構成部品にデータを渡すために使用します.
==親が子供に決めた.
==遺産とか.
==遺産、指定されているのでサブエレメントは変更できません.
===きれいに言えば、propsは読み取り専用です.
propsはオブジェクトタイプです.
==親コンポーネントから渡されたデータを含むオブジェクト.
==つまり、親は子にデータをオブジェクトとして渡します.
==オブジェクトタイプであるため、propsの数やデータ型に制限はありません.
ReactではPropsは今まで見た言葉のattributeのようなやつで、文法もattributeと似ています.
htmlでタグを開き、開始タグに属性を指定するように、reactはコンポーネントを開き、すぐにpropsを指定します.
html

<img src="@@@" />

react

<Component propsName={propsValue} />

3. state

「状態」という語は、構成部品の内部にある構成部品の状態値を指す.
状態はいつでも変わる可能性があります.
useState()という名前のhookを使用します.
useState hookは

const [state, setState] = useState(initialValue);

呼び出しと同時に配列構造分解分配というやつによって分配される.
配列構造分解配分というやつ

const arr = [1, 2, 3];

const one = arr[0];
const two = arr[1];
const three = arr[2];

こんな冗長なコード

const arr = [1, 2, 3];
const [one, two, three] = arr;

このようにきれいなコードで並べ替えて同時に配るカッコいいやつを分解します.
stateとpropsはreactでUIを描く材料です.
ReactはUIを自動的に更新し、コンポーネント自体を再実行します.
いつ更新しますか?