Skip to main content

[ReactDoc] React Hooks - 自訂 Hooks

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

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

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

Sample Codes#

回傳一個狀態的 Custom Hook#

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>]

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;
Last updated on