React Hooks | ちびrobo

参照URL：
https://qiita.com/ushi_osushi/items/98d1bc4a83265a764084

フック早わかり – React

ユーザインターフェース構築のための JavaScript ライブラリ

フック API リファレンス – React

ユーザインターフェース構築のための JavaScript ライブラリ

Hooks とは

入力情報の記録や状態管理、親子間の変数の受け渡しなど複数のコンポーネントを組み合わせる際に必要な機能。
もともとクラスコンポーネントのstateで実現していた機能を関数コンポーネントでも実装できるようにした機能。

フック(関数コンポーネント)

import React, { useState } from 'react'

const App = () => {
    const [count, setCount] = useState(0)

    return (
        <>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </>
    )
}

export default App

フック（Hook）のルール

フックは JavaScript の関数ですが、2 つの追加のルールがあります。

フックは関数のトップレベルのみで呼び出してください。ループや条件分岐やネストした関数の中でフックを呼び出さないでください。
フックは React の関数コンポーネントの内部のみで呼び出してください。通常の JavaScript 関数内では呼び出さないでください（ただしフックを呼び出していい場所がもう 1 カ所だけあります — 自分のカスタムフックの中です。）

フック（Hook）の種類

◎　ステートフック :useState

useState は現在の state の値と、それを更新するための関数とをペアにして返します。

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

＜カウンター＞

import React, { useState } from 'react'

const App = () => {
    const [count, setCount] = useState(0)

    return (
        <>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </>
    )
}

◎　副作用フック:useEffect

useEffectは、レンダリングの後に処理を動作させることができます。
デフォルトではレンダリングが行われる度に毎回動作しますが、第二引数に配列を与えることで、特定の値が変化した時のみ動作させるようにすることもできます。

import React, { useState, useEffect } from 'react'

const App = () => {
    const [count, setCount] = useState(0)


    useEffect(() => {
        console.log('hello useEffect')
    })

    return (
        <>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </>
    );
}

export default App

＜useEffectの第二引数＞

useEffect(() => {
    console.log('hello useEffect')
}, [])
// このように第二引数に空配列を与えると、最初の画面レンダリング時のみ'hello useEffect'が表示されます

useEffect(() => {
    console.log('hello useEffect')
}, [count])
// このように第二引数に[count]を与えると、最初のレンダリング時と、countの値が変更された時のみレンダリング後に'hello useEffect'が表示されます

useContext

Reactでは、他のコンポーネントにデータを渡すための手段としてpropsがあります。
しかしこのpropsを使用すると、親コンポーネントのデータを孫コンポーネントに渡したい場合少々面倒なことをしなければなりません。
Contextのみでもprop drilling問題は解決できますが、useContextも合わせて使ったほうが簡潔でわかりやすいコードを書くことができます。親→孫へ直接データの受け渡しができました。

import React, { createContext, useContext } from 'react'

const Context = createContext()

const Mago = () => {
　　　　const { money } = useContext(Context)
　　　　return <p>{money}円</p>
　　　　}

const Kodomo = () => <Mago />

const Oya = () => {
　　　　return (
　　　　　　　　<Context.Provider value={{ money: 10000 }}>
　　　　　　　　<Kodomo />
　　　　　　　　</Context.Provider>
　　　　)
}

export default Oya