Reactのコンポーネント
紹介
- コンポーネントはユーザーインターフェースの一部であり、独自のロジックと外観を持つことができます。コンポーネント同士は入れ子にしたり、複数回再利用したりすることができます。
- コンポーネントベースの開発により、開発者は積み木を組み立てるように、大規模なアプリケーションを構築できます。
使用方法
- Reactでは、コンポーネントとは頭文字が大文字の関数であり、その内部にコンポーネントのロジックとUI（ユーザーインターフェース）が含まれています。コンポーネントをレンダリングするには、タグとして記述するだけで済みます。
function Son1(props) {
console.log(props.name)
console.log(props.age)
console.log(props.isTrue)
console.log(props.list)
console.log(props.obj)
console.log(props.funct)
console.log(props.child)
}
function Son2(props) {
console.log(props.children)
}
function Son3({onGetMsg}){
const sonMsg = "hello bro"
onGetMsg(sonMsg)
}
function Son4(props){
console.log("now in Son4")
console.log(props.msg)
}
function Son5(){
return ( <Son6/>)
}
ReactのuseState
紹介
- useStateはReactのHook（関数）で、コンポーネントに状態変数を追加することを可能にします。これにより、コンポーネントのレンダリング結果を制御できます。
- 通常のJavaScript変数とは異なり、状態変数が変更されるとコンポーネントのUIもそれに応じて更新されます（データ駆動のビュー）。
使用方法
- useStateは関数であり、戻り値は配列です。
- 配列の1つ目の要素は状態変数、2つ目の要素は状態変数を変更するためのset関数です。
- useStateの引数は
countの初期値として使用されます。
const [count, setState] = React.useState(0)
- Reactでは、状態は読み取り専用と見なされ、常に置き換える必要があります。直接状態を変更してもビューの更新は引き起こされません。
const updateCount = ()=>{
// count++ //not work
setState(count+2)
}