State, Props, Event

Hooks Intro

Hookは、関数構成部品で「リカバリ状態」(Lifecycle Features)と「ライフサイクル機能」(Lifecycle Features)を関連付けることができる関数です.React公式文書
「HooksはHook関数の総称です.」「フック」といえば思いつくスタイルのように、それを「引っ張ってくる」イメージにすればいいのです.欠点があるにもかかわらず、ジェネリック構成部品のみを使用する理由は、ジェネリック構成部品でのみ使用可能な非常に重要な機能を有するためである.その機能はstateとlifecycleの2種類があり、この2つの機能はHooksが導入し、関数型素子で使用するために使用されている.Hooksが安定化すると,関数型素子がクラス素子に取って代わった.

State & Event

State

≪ステータス｜Status｜emdw≫構成部品の内部にある構成部品のステータス値.
画面の構成は静的部分と動的変化部分に分けられる.以前は変数で動的変化を管理していた部分ですが、後でstateで管理できます.逆に、静的部分はstateで管理できません!const [color, setColor] = useState("red");これがuseStateフックを使用してstateを宣言する方法です.colorはパラメータの初期値としてuseState()に割り当てられ、setColorはcolorを置き換えることができる関数に割り当てられる.この関数に論理が含まれている場合、onClickなどのイベントリスナーに渡すコールバック関数の内部でstateを変更すると、イベントが発生するたびにstateを変更できます.
動的値を使用して何かを管理したい場合、stateを使用するのは、UIが更新されるからです.stateが変更された場合(つまり、stateを変更する関数を使用する場合)、stateに書き込まれている関数構成部品が再実行されます.したがって、return文も実行され、UIは再実行に伴って更新されます.

const Login = () => {
  const [color, setColor] = useState("red");
  
  const changeColor = () => {
    setColor("blue");
    console.log("함수 내부", color);  // 함수 내부: red
  }
  
  console.log(color); // blue
  
  return (
    <button onClick={changeColor}>색깔 변경</button>
  )
}

stateの関数を変更するのは非同期です.したがって、stateを変更する関数と同じコンテキストで変更したstateを処理する場合、変更は行われない場合がありますが、return文を実行すると、変更したstateが適用されます.

Props & Event

構成部品の属性値.親コンポーネントから渡されたデータを持つオブジェクト.
Propsを渡すには、親コンポーネントと子コンポーネントが必要です.Reactの情報ストリームは一方向であるため,親コンポーネントから子コンポーネントに無条件に垂直にしか伝達できない.一方向性を維持すると、データ・ストリームがどの程度深く入り込んでも使用できます.
サブエレメントからpropsを取得すると、関数からパラメータを取得するようにpropsを取得できます.propsはオブジェクトであるため、サブコンポーネントからpropsを受信する場合、props.keyの形式で使用してもよいし、パラメータビット上で構造分解割り当てを行うことで使用してもよい.
propsに渡すことができるデータ型には制限はなく、関数を渡すことができ、状態を伝えることができ、状態を変更する関数を渡すことができます.

const Login = () => {
  const [color, setColor] = useState("red");  
  const changeColor = () => {
    setColor("blue");
  }
  return (
    <p style={{color: "red"}}>WOW</p>
    <Child changeColor={changeColor} />
  )
}


// Child.js
const Child = ({ changeColor }) => {
  return <button onClick={changeColor}>Child Button</button>
}

propsを使用してstateを渡し、親コンポーネントでstateを変更すると、親コンポーネントが再実行され、サブコンポーネントが再描画され、変更したstateがpropsに渡されます.