学习如何轻松构建可伸缩的 React 应用程序：数据获取 # React 中服务端数据获取的方式 在大多数 React 应用程序中，应用程序需要来自 API 或服务器的数据才能正常运行。...它是同构的（即可以在浏览器和 nodejs 中使用相同的代码库）。在服务器端，它使用本地的 node.js http 模块，而在客户端（浏览器）中，它使用 XMLHttpRequests。...GraphQL 提供了 API 中数据的完整且易于理解的描述，使客户端能够精确地请求所需的数据，避免了不必要的数据传输，使得 API 能够随着时间的推移更容易地发展，并提供了强大的开发者工具。...Memoization 函数通常更快，因为如果使用相同的参数再次调用函数，则不会重新执行函数，而是从缓存中获取结果。...从 API 缓存的数据可以存储在我们的状态管理中，然后在我们的应用程序中全局使用。尽管数据被缓存，但在刷新页面时，它将丢失数据，需要重新获取。
它是一个针对 React 应用的状态管理器，可以简化许多任务，例如处理 HTTP 请求状态、在客户端保存数据以防止多次请求、使用 hooks 共享数据等等。...你将在本系列中发现更多关于它的内容，学习如何使用它，并欣赏其在 React 应用程序中的简洁性。 useQuery 第一个核心概念是 useQuery。...通过该关键字，React Query 能够存储结果并在应用程序的不同部分中使用它。该关键字用于标识查询，你还可以使用 React Query 客户端通过代码重置查询或更改值。...你也可以重置状态或删除部分状态以重新获取数据。 没错，它提供了许多很好的功能来调试和检查你的 React Query 应用程序，并且它是每个使用 React Query 的开发者的好工具。...refetchOnMount：此选项很重要，可防止 hook 每次使用时重新加载数据 initialData：此选项用于从本地存储加载数据；initialData 接受一个返回初始值的函数；如果初始值已定义
其次他并不限定你使用发起请求的库，所以你可以使用任何你想使用的请求方式，再次强调，他是一个管理高手，他把数据获取从混乱变成秩序，从复杂变成简单，从讨厌变成喜欢。...好吧，现在让我来带你一步步卸下他复杂的面具，以及他是如何改变了数据请求的方式。...为了进一步增强应用和体验，比如网络错误自动重试，为了防止用户看到的是旧的数据，你需要增加窗口焦点时重新自动获取数据等，可以看出如此发展下去，组件需要管理的状态越来越多，你也会越来越力不从心，状态的增多，...Query Invalidation 你所用的query有时需要刷新以重新获取最新数据，这时候你就可以用QueryClient的来使某个query失效，然后该query就会重新去获取数据。...，获取的话就用useQuery。
通过演示一个涉及按钮点击计数器的简单示例，我们突显了如何使用useState()有效地管理基本状态需求。...在Counter组件内部，我们使用useState钩子定义了一个名为count的状态变量，并将其初始化为0。由useState提供的setCount函数允许我们更新count的值并触发组件的重新渲染。...每当状态发生变化时，React都会处理组件的重新渲染并相应地更新显示的计数。这个基本例子演示了在React应用程序中使用useState()钩子管理状态的简单性和强大性。...在Child组件中，我们使用useSelector钩子从Redux store中获取count状态。我们还使用useDispatch钩子获取对dispatch函数的引用。...我们定义了一个postData函数，用于向服务器保存新数据的POST请求。在DataComponent中，我们使用useQuery钩子使用fetchData函数获取数据。
在之前，了解了如何设置模拟 API，而在本节中，将学习如何通过应用程序消费 API。当我们提到 API 时，指的是 API 后端服务。...我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...# 配置 API 客户端 我们将使用 Axios 作为我们的应用程序的 API 客户端，它是一个非常流行的用于处理 HTTP 请求的库。...，那么这样做是可以的，但在大多数情况下，我们需要从许多不同的地方获取数据。...对于请求定义函数，我们将使用我们刚刚创建的 axios client，对于 hooks，我们将使用 React Query 的 hooks。
请求的管理，常用的配置如下： staleTime： 重新获取数据的时间间隔 默认0 cacheTime： 数据缓存时间 默认 1000 60 5 5分钟 retry： 失败重试次数 默认 3次 refetchOnWindowFocus...： 窗口重新获得焦点时重新获取数据 默认 false refetchOnReconnect： 网络重新链接 refetchOnMount： 实例重新挂载时重新拉取请求 enabled： 如果为“false...”，“useQuery”不会触发，需要使用其返回的“refetch”来触发操作 queryFn：全局定义请求方法，其他地方使用时只需要直接传入请求参数 useQuery useQuery是React-Query...useQuery拉取回来的数据，会被默认缓存起来，然后可以通过配置过期时间，重新拉取等策略来进行管理。...那我们可以使用queryClient的prefetchQuery方法，提前拉取到用户可能会访问的数据，并加入到缓存中，由于不需要监听服务端状态等，所以这个方法会比useQuery高效许多。
另外，如果你使用的是 GraphQ L，还可以考虑使用 Apollo 之类的其他不错的选择。这篇文章假设你正在调用传统的 REST API。 方式1：内联 这是最简单，最直接的选择。...使用这种方法，我们创建了一个名为 services 的文件夹，并且把进行 HTTP 调用的函数都放进去。...方式3：自定义Hook 借助 React Hooks 的魔力，我们终于可以集中处理重复的逻辑。那么如何创建一个自定义 useFetch 钩子来简化我们的 HTTP 调用呢？...，但我发现这个基本的使用方法很有用。...但是还有很多我们没有考虑到的点：缓存？、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？ 你可以不断完善这个自定义Hook来完成所有这些操作。
客户端代码示例（使用Apollo Client）import { gql, useQuery } from '@apollo/client';const GET_USERS_AND_POSTS = gql...useQuery从GraphQL服务器获取数据，并渲染用户和他们的帖子信息。...下面展示如何使用一个自定义的@auth指令来控制访问权限。首先，假设我们定义了一个@auth指令，用于限制对某些字段的访问，要求用户必须登录。...错误处理自定义错误处理，提升客户端对错误的处理能力。...客户端控制：客户端可以决定获取多少数据，何时获取，提高了用户体验。缓存优化：客户端可以根据返回的数据结构更容易地进行缓存策略的实施。
在本指南中，我们将介绍如何将 GraphQL 无缝集成到您的 React.js 项目中。什么是 GraphQL？GraphQL 是用于 API 的查询语言，也是用于执行那些查询的运行时。...它允许您仅请求所需的数据，从而使 API 调用更加高效。与传统的 REST API 不同，传统的 REST API 由服务器确定响应结构，而 GraphQL 则使客户端能够定义其所需数据的形状和结构。...GraphQL 获取数据现在，让我们使用 GraphQL 在 React 组件中获取数据。...@apollo/client 中的 useQuery 钩子执行 GET_POSTS 查询。...ApolloProvider 组件包装您的应用程序，并将客户端实例作为属性传递，以便在整个应用程序中进行 GraphQL 查询。
我们获取数据，通过 reducer/action 将其添加到存储中，并定期重新获取以确保它是最新的。我们用 Redux 做的事情太多了，甚至把它看成是解决问题的全面解决方案。...关键在于，我们的前端和后端状态永远不会真正同步，我们最多可以营造一种它们同步的错觉。这是客户端 - 服务器模型的缺点之一，也是为什么我们需要缓存的原因所在。...我使用常规 JS、React Hooks 和 axios 实现了一个从服务器获取的简单 TODO 列表。...下面是使用 React Query 实现的相同示例： import React from "react"; import { useQuery } from "react-query"; import...一起使用，并使用异步调用来获取数据。
还是会在 any 类型下获取属性，但由于没有类型提示，导致写错个单词，最终提示 Cannot read properties of undefined (reading 'xxx')？...tRPCtRPC 是一个基于 TypeScript 的远程过程调用框架，旨在简化客户端与服务端之间的通信过程，并提供高效的类型安全。...下面我一步步讲解如何进行接口调用。定义服务端这里以 Next.js 的目录结构而定。创建 server/trpc.ts，如下代码。...,})export type AppRouter = typeof appRouter此时已经定义好了一个路由地址 api/trpc/[trpc].ts（这里 endpoint(端点)会在客户端中使用到...首先不如传统的 RESTFUL 来的直观，假设我现在在服务端定义了一个服务，那么我只能通过@trpc/client 创建客户端进行调用。虽然也能用 http 的形式，但调用的很不优雅。
还是会在 any 类型下获取属性，但由于没有类型提示，导致写错个单词，最终提示 Cannot read properties of undefined (reading 'xxx')？...tRPC tRPC 是一个基于 TypeScript 的远程过程调用框架，旨在简化客户端与服务端之间的通信过程，并提供高效的类型安全。...tRPC 如何进行接口调用 一图胜千言，你可以点击 这里 在线体验一下 tRPC，并且查看其没目录结构，以及调用方式。下面我一步步讲解如何进行接口调用。..., }) export type AppRouter = typeof appRouter 此时已经定义好了一个路由地址 api/trpc/[trpc].ts（这里 endpoint(端点)会在客户端中使用到...主要防止这个组件被其他组件调用，此时自动调用 mutate 函数，导致不可控且循环调用的情况，因此需要通过一个事件（比如点击事件）来触发。
util 文件夹内，这个文件夹中的 hook 都是一些复用性高的，和页面关系不大的 hook 1. useKanbans 这里获取数据的方法和前面获取项目数据的方法一样，我们采用 useQuery 来进行缓存看板数据...，当 param 变化时，重新发送请求，写入缓存 return useQuery(['kanbans', param], () => client('kanbans', {...[1] return Number(id) } 3. useProjectInUrl 有了我们的 projectId ，我们就可以使用通过它来获取我们的项目数据，这样我们就能获取到我们的项目的名称...，显示到页面上 // 通过 id 获取项目信息 export const useProjectInUrl = () => useProject(useProjectIdInUrl()) 使用 const...useProjectIdInUrl() }) 5. useTasks 接着我们需要来获取 task 数据，也就是我们这个项目的任务数据 和获取 kanban 数据一样，我们需要采用 useQuery 来处理
网络安全：解决服务两方面问题，如何保护通过网络传播的数据流以及如何防止未授权的网络。 应用安全：确保设计和部署的应用可以对抗攻击、防止误用。...例如加强对一些系统内部自带的敏感操作的API函数进行保护，可用自实现的方式防止被直接挂钩系统函数而破坏了功能流程。...每个 API 都应该使用传输层安全(TLS)来防止数据泄露。虽然这引入了证书管理的复杂性，但现代平台正在转向集成证书解决方案以简化采用。...5、确保对 API 密钥使用精细的权限，以避免提供不必要或意外的访问权限。 6、如果你开发的软件有特别复杂的授权要求，请考虑使用标准库，不要重新发明轮子并增加复杂性和维护问题。...7、使用标准授权模式降低复杂性，同时利用客户端进行密集处理，减少给客户端返回数据量。 8、在软件中强化对日志记录的实施，并确保采用标准模式，有利用后续日志信息的审查和优化。
这意味着纯组件仅在 props 或 state 发生更改时才会重新渲染。它在处理类组件时特别有用，并且可以通过避免不必要的重新渲染来帮助提高性能。...Title Description ) } } React.memo() 是一个高阶组件，与功能组件一起使用以防止不必要的重新渲染...d) React.memo() 或 PureComponent：React.memo() 和 PureComponent 都是 React 中的性能优化技术，可以帮助防止不必要的组件重新渲染。...通过这样做，可以避免不必要的重新渲染。...使用路由防护和嵌套路由来保护路由并管理基于用户身份验证和授权的访问控制。 数据获取： 使用 Axios、fetch 或 GraphQL 客户端等库从外部 API 或来源获取数据。
param 值，在 UserSelect 中同样的采用这样的方式修改 param 值，触发 url 的更新，这样我们的功能就实现了一半了，接下来我们需要利用当前用户查询的 param 去获取数据 const...hook ，它会在 param 变化时 ，通过 useQuery 不断的请求数据，这也是我们返回的数据中能够有 isLoading、error 这些的原因 在这里提一下 useQuery ，它是 reacy-query...useQuery 重新执行 export const useProjects = (param?...: Partial) => { const client = useHttp() // 当 param 变化的时候触发 useQuery 重新渲染，我们需要在第一个参数中传入一个数组...如何 实现了输入框与 url 统一 采用 hook 实现防抖 最后，可能在很多地方讲诉的不够清晰，请见谅 如果文章有什么错误的地方，或者有什么疑问，欢迎留言，也欢迎私信交流
前言 在项目中，通常都需要跟服务端进行异步的数据交互，基本都是用到axios这个库来做请求，嗯，毕竟拥有80k star,明星项目 接下来，我们来回顾下axios在项目中的使用 以查询用户信息为例，我们会这样封装...另外，现在的前端项目特别是单页面应用，会使用Flux、Redux、Mobox等状态管理库，会把组件间共享的数据都存放在状态管理库中，这些可以分为两类，一类是用户交互的中间状态,比如isLoading,isClose...接下来，就是引出今天的主角 React Query React Query React Query 通常被描述为 React 缺少的数据获取(data-fetching)库，但是从更广泛的角度来看...，它使 React 程序中的获取，缓存，同步和更新服务器状态变得轻而易举。...等)适用于管理客户端状态，但它们并不关心客户端是如何异步请求远端数据的，所以他们并不适合处理异步的、来自服务端的状态。
优势 阿波罗的功能非常强大，几乎满足一般的分布式系统的使用要求，重点主要如下： 配置多维度 application (应用) environment (环境) cluster (集群) namespace...总的来说利大于弊，还是值得去使用的。...从上图看到，阿波罗配置更新具备推和拉两种方式，在后台修改并发布后，会及时将配置推给客户端，假如没推成功，客户端会通过后台线程定时更新。...如果客户端与服务端发生了网络分区，此时可以通过客户端获取本地文件缓存的配置数据，让系统正常运作。 缓存数据默认存储在C:\opt\data 从以上来看，阿波罗在可用性设计上还是很不错的。...结束 最近公司在选型配置中心，因此在玩阿波罗的时候同时记录其过程。 客户端demo:https://github.com/SkyChenSky/Apollo.Demo
我们可以使用内置的钩子并编写自己的： 内置钩子：这些API（如 useState() ）使功能组件能够“挂钩”到React的所有功能。 自定义钩子：这些只是我们编写的实现内置钩子的函数。...下面是一个使用自定义钩子共享数据获取逻辑的示例。你不必完全了解如何使用 useState 和 useEffect ，只需要了解它们为组件执行一些逻辑，我想共享它。...如果另一个组件也想根据 productId 获取产品，那么需要重新编写下面高亮的代码： 这里是相同的逻辑移至自定义钩子。...如果你想要一个获取数据的自定义 Hook，推荐来自 React Query 的自定义钩子，名为 useQuery() 。 如今，如果你愿意，你仍然可以使用类。如果你觉得它们更容易使用，那完全取决于你。...他们可能不了解类组件的“进退维谷”，如何处理这种奇怪的作用域问题，以及何时以及如何使用 HOC 或 Render Props。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
