React Hooks

Hooksとは
useState
useEffect
useContext

Hooksとは

クラスコンポーネントを記述せずにstateやその他のReactの機能を使用できる機能
フックではReactのstate管理、親子間の変数の受け渡しなどの機能へのアクセスを関数コンポーネントとして利用する

useState

Reactにおいてコンポーネント内で値を保持/利用する機能

Stateとは
Reactにおいてコンポーネント内で値を保持しておく為に使用するメモリ領域

import { useState } from ‘react’;

export const App = () => {
　const [変数名, 変数を操作する関数名] = useState(初期値);
　const [num, setNum] = useState(0);

　return (
　　<div>
　　　<button onClick={ () => setNum(num + 1) }>Click me</button>
　　　<p>clicked {num} times.</p>
　　</div>
　);
};

useEffect

関数の実行タイミングをReactのレンダリング後まで遅らせる機能

import { useState, useEffect } from ‘react’;

export const App = () => {
　const [num, setNum] = useState(0);
　const [name, setName] = useState({
　　firstName: ”
　});

　useEffect(() => { 実行させたい処理 }, [ 依存する変数 ]);
　依存する変数＝変数に変化があった場合にのみ、処理が実行される
　useEffect(() => {
　　document.title = `clicked ${num} times`;
　}, [num]);
　numに変化があった場合のみ、useEffect内の処理が実行される
　nameに変化があった場合でも、useEffect内の処理は実行されない

　return (
　　<div>
　　　<button onClick={ () => setNum(num + 1) }>Click me</button>
　　　<p>clicked {num} times.</p>

　　　<input type=”text”
　　　　value={name.firstName}
　　　　onChange={ (e) => { setName({…name, firstName: e.target.value}) }} />
　　</div>
　);
};