PJCHENder 未整理筆記

[ReactDoc] React Hooks - 自訂 Hooks

2019-08-09

[ReactDoc] React Hooks - 自訂 Custom Hooks

@(React)[react docs, React, React Hook]

本文章內容來自 React 官方文件 - Building Your Own Hooks

自訂的 Hooks 就是一個單純的 JavaScript 函式,它的名字會以 use 開頭,並可能會在其內部呼叫其他的 Hooks。

此外,當你多次使用同一個自訂的 Hooks 時,所有的狀態(state)和作用(effect)都是完全獨立的。

Sample Codes

回傳一個狀態的 Custom Hook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);

useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}

ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});

return isOnline;
}

回傳 state 和 setState 方法的 Custom Hook

最後的地方 return [<state>, <setState>]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { useState, useEffect } from 'react';
import axios from 'axios';

const useHackerNewsApi = () => {
const [data, setData] = useState([]);
const [queryString, setQueryString] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);

useEffect(() => {
console.log('useEffect');
const fetchData = async () => {
console.log('fetchData');
setIsError(false);
setIsLoading(true);

try {
const result = await axios(
`https://hn.algolia.com/api/v1/search?query=${queryString}`
);
setData(result.data && result.data.hits.filter((item) => item.title));
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [queryString]);

return [{ data, isLoading, isError }, setQueryString];
};

export default useHackerNewsApi;

掃描二維條碼,分享此文章