反応する.州と小道具

反応は、それが10年前にちょうどリリースであるので、ますます人気があるようになったJavaScriptライブラリです.今では最も人気のあるJavaScriptライブラリを使用します.このブログでは、私はどのように反応州と小道具の仕事を議論するつもりです.
コンポーネント
小道具と状態に入る前に、私は最初に、成分が反応しているものを説明したいです.コンポーネントは基本的に小道具を受け取り、JSXを返す関数です.それらは再利用可能なコードを内部で書くことができ、そのコードを実行し、DOMにそれをレンダリングするので、反応のビルディングブロックです.ここに基本的なコンポーネントがあります.

function Home() {
  return (
    <div id="home">
      <h1>Home</h1>
    </div>
  );
}

これは「ホーム」という名前のコンポーネントです.このコンポーネントはどんな小道具も取りません、しかし、それはJSXを返しています.このコンポーネントは、「ホーム」のidを持つdiv要素を「ホーム」の内部テキストを持つH 1要素で内部に表示します.
小道具
反応では、小道具はプロパティのために短いです.反応は、反応コンポーネント間のデータを渡すために小道具を使用します.反応では、親コンポーネントから子コンポーネントへの小道具を渡すことができます.子コンポーネントから親コンポーネントに直接渡すことはできません.親コンポーネントから子コンポーネントに渡されるpropの例を示します.

function ParentComponent() {
    return (
        <ChildComponent name="child" />
)
}

function ChildComponent(props) {
    return (
       <h1>{props.name}</h1>
)
}

ここで親コンポーネントは子要素に小文字を通してデータを渡します.それは名前を与えています、そして、その名前は「子供」です.親がデータを受け渡しているときは、親は通過しているキーと値のペアを持つプロップオブジェクトを生成します.したがって、この例では、プロップオブジェクトは名前のキーと“child”の対応する値で作成されます今、子供がこのデータにアクセスするために、それは値としてpropsオブジェクトを受け入れなければなりません、そして、それはその小道具オブジェクトにドット表記を使用することによって内部でデータにアクセスすることができます.
州
反応では、状態は、ユーザーが反応アプリケーションと対話するように時間をかけて変更されるデータです.それはダイナミックであり、簡単に動的なアプリケーションを作成することができます.状態は、親コンポーネントがその更新されたデータを送信する必要がないコンポーネント内のデータを更新および変更できます.状態を使用するには、以下のようにファイルの内部にUSENTという反応フックをインポートしなければなりません.

import { useState } from "react"

いくつかのデータを動的にして時間をかけて変更できるようにするためには、USENTを使ってデータを設定しなければなりません.例えば、私たちには数のカウントがあると言います、そして、ユーザーが我々のページで何かをするたびに、そのカウントは増加しそうです.このようにカウント変数の状態を設定する必要があります.

const [count, setCount] = useState(0)

USENTは自動的に2つの変数を持つ配列を返します.最初の変数(count)は、その状態(0)の現在または初期値を参照します.番目の変数(setCount)は、最初の変数の状態を更新できる機能です.状態を更新または設定するには、2番目の変数を呼び出し、その内部で状態を更新する方法を入力します.例えば、

setCount(count + 1)