フック早わかりを読む
ステートフックの例
code:js
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
フックとは関数コンポーネントに state やライフサイクルと行った React の機能を接続するための関数。
クラスなしに使うための機能。
複数設置OK
副作用フックの例
code:js
import React, { useState, useEffect } from 'react';
function Example() {
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = You clicked ${count} times;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect を呼ぶことで、DOM への更新を反映した後に定義する「副作用関数」を実行するように React に指示できる
副作用関数はコンポーネント内で宣言される
props や state にアクセスできる。
デフォルトでは初回レンダーも含む毎回のレンダー時にこの副作用関数が呼び出される
複数設置OK
フックのルール
フックは関数のトップレベルのみで呼び出す
ループ・条件分岐・ネストした関数の中で呼び出さない
フックは React の関数コンポーネントの内部のみで呼び出す
独自フックの作成
code:js
import React, { useState, useEffect } from 'react';
// 独自フック
function useFriendStatus(friendID) {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
// コンポーネント1
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
// コンポーネント2
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
それぞれのコンポーネントの state は完全に独立している
フックは state を用いたロジックを再利用するもの
state そのものを再利用するものではない
カスタムフックは機能というよりは慣習
use からはじまる
その関数が他のフックを呼び出している
フォーム管理、アニメーション、宣言的なデータソースの購読、タイマーなどに利用可能