11、使用 Hooks 进行数据获取、表单处理及状态管理

使用 Hooks 进行数据获取、表单处理及状态管理

在前端开发中，数据获取、表单处理以及状态管理是常见且重要的任务。本文将详细介绍如何使用 TanStack Query 库进行数据获取和创建，以及如何利用 React Suspense 和 Error Boundaries 处理加载和错误状态，还会涉及使用 Hooks 处理表单和实现乐观更新的内容。

1. 准备使用 TanStack Query

在使用 TanStack Query 之前，需要进行一些准备工作，包括包裹应用和移除不必要的属性：

const [username, setUsername] = useState('')
useEffect(() => {
  fetch('/api/posts')
    .then((response) => response.json())
    .then((posts) => dispatch({ type: 'FETCH_POSTS', posts }))
}, [])
const featuredPosts = posts.filter((post) => post.featured).reverse()
const regularPosts = posts.filter((post) => !post.featured).reverse()

// 包裹应用
return (
  <QueryClientProvider client={queryClient}>
    <UserContext.Provider value={[username, setUsern