API 集成

// 基础示例：使用自定义 Hook 进行 API 集成
import React, { useState, useEffect, useCallback, useRef } from "react";

// 自定义 Hook：用于封装数据获取逻辑
function useFetch(url) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
const cache = useRef({});

const fetchData = useCallback(async (signal) => {
if (!url) return;
setLoading(true);
setError(null);

if (cache.current[url]) {
setData(cache.current[url]);
setLoading(false);
return;
}

try {
const response = await fetch(url, { signal });
if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
const json = await response.json();
cache.current[url] = json;
setData(json);
} catch (err) {
if (err.name !== "AbortError") setError(err);
} finally {
setLoading(false);
}

}, [url]);

useEffect(() => {
const controller = new AbortController();
fetchData(controller.signal);
return () => controller.abort();
}, [url, fetchData]);

return { data, error, loading, refetch: () => fetchData(new AbortController().signal) };
}

// 主组件：展示用户数据
export default function UserList() {
const { data, error, loading, refetch } = useFetch("[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)");

if (loading) return <div>正在加载数据...</div>;
if (error) return <div>错误：{error.message}</div>;
if (!data) return <div>暂无数据</div>;

return ( <div> <h2>用户列表</h2> <button onClick={refetch}>刷新数据</button> <ul>
{data.map((user) => ( <li key={user.id}> <strong>{user.name}</strong> ({user.email}) </li>
))} </ul> </div>
);
}

// 实用示例：带有分页、搜索和性能优化的高级 API 集成
import React, { useReducer, useEffect, useCallback, useRef } from "react";

const initialState = {
query: "",
page: 1,
data: [],
loading: false,
error: null,
cache: {},
};

function reducer(state, action) {
switch (action.type) {
case "SET_QUERY": return { ...state, query: action.payload, page: 1 };
case "FETCH_START": return { ...state, loading: true, error: null };
case "FETCH_SUCCESS":
return {
...state,
loading: false,
data: action.payload,
cache: { ...state.cache, [action.key]: action.payload },
};
case "FETCH_ERROR": return { ...state, loading: false, error: action.payload };
case "SET_PAGE": return { ...state, page: action.payload };
default: return state;
}
}

export default function SearchApp() {
const [state, dispatch] = useReducer(reducer, initialState);
const controllerRef = useRef(null);

const fetchResults = useCallback(async (query, page) => {
if (!query) return;
const key = `${query}|${page}`;
if (state.cache[key]) {
dispatch({ type: "FETCH_SUCCESS", payload: state.cache[key], key });
return;
}

dispatch({ type: "FETCH_START" });
if (controllerRef.current) controllerRef.current.abort();
controllerRef.current = new AbortController();

try {
const res = await fetch(`/api/search?q=${encodeURIComponent(query)}&page=${page}`, {
signal: controllerRef.current.signal,
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const json = await res.json();
dispatch({ type: "FETCH_SUCCESS", payload: json.results, key });
} catch (err) {
if (err.name !== "AbortError") dispatch({ type: "FETCH_ERROR", payload: err });
}

}, [state.cache]);

useEffect(() => {
const delay = setTimeout(() => fetchResults(state.query, state.page), 400);
return () => clearTimeout(delay);
}, [state.query, state.page, fetchResults]);

return ( <div>
<input
value={state.query}
placeholder="搜索内容..."
onChange={(e) => dispatch({ type: "SET_QUERY", payload: e.target.value })}
/>
{state.loading && <p>正在加载...</p>}
{state.error && <p>错误: {state.error.message}</p>} <ul>
{state.data.map((item) => ( <li key={item.id}>{item.title}</li>
))} </ul>
<button disabled={state.page === 1} onClick={() => dispatch({ type: "SET_PAGE", payload: state.page - 1 })}>
上一页 </button>
<button onClick={() => dispatch({ type: "SET_PAGE", payload: state.page + 1 })}>
下一页 </button> </div>
);
}