React State/Props

4040 ワード
テキストリンク

stateとpropsの違い


propsとstateは、通常のJavaScriptオブジェクトです.
どちらのオブジェクトにもレンダリングの成果物に影響を与える情報がありますが、違いがあります.

props(関数パラメータなど)は素子に渡される。


state(関数で宣言された変数など)は、構成部品で管理されます。


State


userStateという名前のReact Hooksでご利用いただけます


説明リンク!
https://ko.reactjs.org/docs/hooks-intro.html 
import { useState } from 'react'

export default function CounterStatePage(){
    const [count, setCount]=useState(0)

    function counter(){
        setCount(count + 1)
    }

    return (
        <div>
            <div>{count}</div>
            <button onClick={counter}>카운트 올리기!!</button>
        </div>
    )
}
count=変数名
setCount=置換変数
useState=変数の作成
0=初期値
countという変数名が作成され、初期値は0(usState(0))に設定されています.
counterという名前の関数をsetCountという名前で作成します.
onClickでcounter関数を実行

Props


親構成部品が子構成部品に継承する変数または関数.

props ={aaa: handleChangeWriter}
html部分に機能を入れる必要がある場合はpropsを用いて移動して実現する
親は子供にしかあげられないが,子供は親にあげられない.
reactでは、データストリームは一方向です.
直感的で簡潔なデータ構造を実現

感情から支える方法



感情的に道具を直接動かす
矢印関数の使用
background-color : ${(props) => props.aaa};
詳細測定Generics Collections TList(11):Create
自動再表示[react]