React Hooksとは
React Hooksとは，React16.8から追加されたもので，Reactのstateやライフサイクルの機能などをクラスコンポーネントではなく，関数コンポーネントでも利用できるようにする機能．
Reack Hookのメリット
Reactの公式では，クラスコンポーネントを使うより，hookを用いて関数コンポーネントの方を推奨している．その理由としては，同じ機能を実装するにもコード量が少なく，読みやすいという点がある．
クラスを使った場合
import React from 'react';
class MessageClass extends React.Component {
constructor(props) {
super(props);
this.state = {
message: "Hello, Click the button!",
};
}
updateMessage() {
this.setState({ message: "Button clicked!" });
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.updateMessage()}>Click me</button>
</div>
);
}
}
export default MessageClass;
クラスコンポーネントでは，stateの管理にthis.stateやthis.setStateなどthisバインディングを使ってメソッド内でコンポーネントのプロパティやメソッドにアクセスする．
関数コンポーネント(Hooksを使用)
import React, { useState } from 'react';
const MessageFunction: React.FC = () => {
const [message, setMessage] = useState("Hello, Click the button!");
const updateMessage = () => {
setMessage("Button clicked!");
};
return (
<div>
<p>{message}</p>
<button onClick={updateMessage}>Click me</button>
</div>
);
}
export default MessageFunction;
関数コンポーネントではuseStateというHookを利用して，関数内で変数を宣言してstateを操作する．
thisバインディングを利用しないため，コードがシンプルで読みやすいということがわかる．
Hooksの注意点
- 関数コンポーネントでのみ利用可能(クラスコンポーネントでは利用不可)
- Hookを呼び出すのはトップレベルのみ
→Hookをループや条件分岐，ネストされた関数内で呼び出してはいけない．
以下のような場合はエラーが発生する．
const MessageFunction: React.FC = () => {
if(someCondition){
const [message, setMessage] = useState("Hello, Click the button!");
}
return (
<div>
<p>{message}</p>
<button onClick={updateMessage}>Click me</button>
</div>
);
}
if文の中でHookを利用しているため，エラーが発生してしまう．
基本的なHook
この記事では公式に基本的なhookとして挙げられた三つを紹介するが，他にも様々な便利なHookがある．これらを活用することで効率の良い開発を行うことができる．
useState
状態を管理するためのHooks．
コンポーネント内で状態stateを保持し，更新することもできる．
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
useEffect
副作用を処理するためのHooks．
コンポーネントがマウント，アンマウント，更新されるタイミングで副作用を処理することができる．
副作用とは
プログラムの実行結果に影響を与えるが、関数の戻り値として直接返されないアクションや変更のこと(外部データの読み書き，画面の更新，ログ出力，タイマー処理など)
import React, { useState, useEffect } from 'react';
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
<ul>
{data.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
);
}
Reactにおけるマウント(Mount)とアンマウント(Unmount)について
マウントとはコンポーネントが初めてDOMに描画されること．マウントされると，コンポーネントを表示されるために必要な初期化や設定が行われる．
一方，アンマウントとはコンポーネントがDOMから取り除かれること．コンポーネントに関連するリソースの解放やクリーンアップなどが呼び出される．
useContext
コンテキストを使用するためのHooks．
コンポーネントツリー内でのグローバルなデータの共有を容易にする．
import React, { useContext } from 'react';
const ThemeContext = React.createContext();
function ThemedComponent() {
const theme = useContext(ThemeContext);
return <div style={{ color: theme.color }}>Themed Text</div>;
}
親コンポーネントから子コンポーネントへデータの受け渡しに”props”を利用するが，コンポーネントが増え，何層にもなるとデータの受け渡しが大変である．
useContextを用いることで，データをグローバルに定義することができる．つまり，直接親子関係にないコンポーネントからでもデータを取得することができるということである．