如何通过SWR钩子使用存储在缓存中的数据，以及如何使SWR只获取一次 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【React】1935- 来看看 SWR 如何用 React Hook 实现优雅请求

这两种请求方式的数据流如下图所示：当然这里仅仅是 hook 带来的好处，下面我们详细讲讲 SWR 可以在我们实际开发的场景中提供什么帮助吧～实际使用场景数据缓存首先就是 SWR 的核心功能数据缓存...我们每一次发送请求后，后端响应的数据都会被缓存下来，当我们下一次请求相同接口时，SWR 依然会发送请求，但是它会先将上一次请求的数据直接给你，然后再去发送请求。...如果我们在表格数据加载完成后，我们操作一下表格中的数据，例如删掉其中一条，此时在发送删除请求成功后，我们一般会重新请求一下表格的数据，那么此时又会出现一次加载动画或者骨架屏。...除了在单个请求中配置，你也可以通过 SWR 的全局配置，为所有的请求设置相同的策略。...大家在使用的时候也可以看看，加深下理解，希望中文文档能降低大家的使用成本，使这个优秀的库可以在国内的流传度更高些。

1K1 0

React 中请求远程数据的四种方法

React 是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。...，抛出错误在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏声明一个空的依赖项数组，以便 useEffect 只运行一次这只是一个简单的示例，它忽略了许多其他相关问题...service 是最流行的术语，我在下面也讨论了很多好的替代名称，如 client 或 api。要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。...但是还有很多我们没有考虑到的点：缓存？、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？你可以不断完善这个自定义Hook来完成所有这些操作。...但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。

2.3K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

React 中请求远程数据的四种方法

React 是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。...，抛出错误在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏声明一个空的依赖项数组，以便 useEffect 只运行一次这只是一个简单的示例，它忽略了许多其他相关问题...service 是最流行的术语，我在下面也讨论了很多好的替代名称，如 client 或 api。要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。...但是还有很多我们没有考虑到的点：缓存？、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？你可以不断完善这个自定义Hook来完成所有这些操作。...但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。

4.1K1 0

为什么我不再用Redux了

Redux 是 React 生态系统中的革命性技术。它使我们能够在全局范围内存储不可变数据，并解决了在组件树中 prop-drilling 的问题。...它将我们的后端与前端代码分离开来，使我们能够专心一致并分离出关注点。围绕状态，它还引入了很多复杂性。现在，异步获取数据意味着数据必须位于两个位置：前端和后端。...我们必须考虑如何在全局范围内以最佳方式存储这些数据，以便它们能对我们的所有组件都可用，同时保持数据缓存以减少网络延迟。...我们获取数据，通过 reducer/action 将其添加到存储中，并定期重新获取以确保它是最新的。我们用 Redux 做的事情太多了，甚至把它看成是解决问题的全面解决方案。...、缓存和无效化，只是加载数据并在加载时将其存储在全局存储中而已。

2.7K2 0

面试官：请使用 JS 简单实现一套 SWR 机制

SWR 的使用场景通常有：当前天气状况的 API，或者过去一小时内编写的头条新闻等。代码实现了解了什么是 SWR 后，接下来看看如何实现它。实现之前，先拆解下目标： 1....如果数据已经过期，则发起 fetch 请求，获取最新数据我们需要用一个“容器”来缓存请求回来的复杂数据，在 JS 中，我们很容易第一时间想到使用 Object。...使用 Object 虽然没有什么问题，但它的结构是 “字符串—值” 的对应，只支持字符串作为键名。...只需要在发起新的请求前，判断下是否过期： const isStaled = Date.now() - 获取到数据的时间 > cacheTime 所以，在缓存数据中我们还需要保存获取到数据的时间： const...随后调用会立即返回缓存数据。如果调用间隔超过 3s，将先返回缓存数据，再请求接口获取最新的数据。大功告成！我们用近 20 行代码简单实现了一套 SWR 机制。

1.2K2 0

音视频八股文（11）-- ffmpeg 音频重采样

当然是原有的⾳频参数不满⾜我们的需求，⽐如在FFmpeg解码⾳频的时候，不同的⾳源有不同的格式，采样率等，在解码后的数据中的这些参数也会不⼀致(最新FFmpeg 解码⾳频后，⾳频格式为AV_SAMPLE_FMT_FLTP...DO NOT USE if linking dynamically};2.3 分⽚（plane）和打包（packed）以双声道为例，带P（plane）的数据格式在存储时，其左声道和右声道的数据是分开存储的...，左声道的数据存储在data0，右声道的数据存储在data1，每个声道的所占⽤的字节数为linesize0和linesize1；不带P（packed）的⾳频数据在存储时，是按照LRLRLR...的格式交替存储在...data0中，linesize0表示总的数据量。...例如，以下代码将设置从平⾯浮动样本格式到交织的带符号16位整数的转换，从48kHz到44.1kHz的下采样，以及从5.1声道到⽴体声的下混合（使⽤默认混合矩阵）。这是使⽤swr_alloc（）函数。

9722 0

FFmpeg之重采样demo解析！

那是因为当原有的音频参数不满足我们实际要求时，比如说在FFmpeg解码音频的时候，不同的音源有不同的格式和采样率等，所以在解码后的数据中的这些参数也会不一致(最新的FFmpeg解码音频后，音频格式为AV_SAMPLE_FMT_TLTP...);如果我们接下来需要使用解码后的音频数据做其它操作的话，然而这些参数的不一致会导致有很多额外工作，此时直接对其进行重采样的话，获取我们制定的音频参数，就会方便很多。...，其左声道和右声道的数据是分开存储的，左声道的数据存储在data[0]，右声道的数据存储在data[1]，每个声道的所占⽤的字节数为linesize[0]和 linesize[1]；不带P（packed...）的⾳频数据在存储时，是按照LRLRLR...的格式交替存储在data[0]中，linesize[0] 表示总的数据量。...可以随时通过使⽤swr_convert（）（in_count可以设置为0）来检索不需要将来输⼊的样本。

1.5K1 0

【Android 音视频开发打怪升级：FFmpeg音视频编解码篇】四、Android FFmpeg＋OpenSL ES音频解码播放

本文你可以了解到本文介绍如何使用 FFmpeg 进行音频解码，重点讲解如何使用 OpenSL ES 在 DNK 层实现音频渲染播放。...想要调用 Object 中的 Interface 方法，必须要通过 Object 的 GetInterface 先获取到接口 Interface ，再通过获取到的 Interface 来调用。...DataSource 和 DataSink 在创建 Audio Player 的时候，需要给其设置数据源和输出目标，这样播放器才知道，如何获取播放数据、将数据输出到哪里进行播放。...配置数据源、输出器、以及初始化后，获取播放接口、音量调节接口等。 ⚠️ 要注意的是最后一步，即代码中的第【5】。数据源为缓冲队列的时候，需要获取一个缓冲接口，用于将数据填入缓冲区。...在这个方法中，首先，将 m_data_queue 中已经使用的数据先删除，回收资源；接着，判断是否还有未播放的缓冲数据，没有则进入等待；最后，通过 (*m_pcm_buffer)->Enqueue

1.7K3 0

Netlify提供的静态网站渲染和缓存技术

## 静态渲染在Web的早期，所有网站都是静态站点——手写HTML文件的集合存储在服务器上，最可能是通过FTP客户端上传的，并直接提供给用户在他们的Web浏览器中使用。...而且一个单独的HTML文件非常容易在Netlify上托管，通过连接Git存储库或通过Netlify Drop上传。这是我之前创建的一个。...当您使用SWR呈现特定页面时，该页面的一个版本将在初始构建期间进行静态生成和缓存。当该页面被更新时，不会立即触发该页面的重建，而是在下一次有人请求该页面时进行。...请记住，使用 SWR/ISR 时，一些访问您网站的访客可能会看到过时的内容，因为更新的页面会在服务器上重建并缓存。您不会希望在显示准确且最新的数据（例如定价数据）的页面上使用 SWR。...使用 DPR 请求页面的第一次请求将产生类似 SSR 的体验，之后生成的页面将从缓存中提供。

4233 0

自定义Hooks解析

存储到ref中 ref.current = fn; // 因为useRef创建的对象ref在函数重新渲染时地址不会改变，所以persistFn将持久化存储。...，初始化的时候获取缓存数据 const [fetches, setFeches] = useState(() => { // 如果有缓存 if (cacheKey...data; export { getCache, setCache }; 从上面代码的注释来看，实现swr能力非常简单，只需要在每次请求的时候将数据存储到全局的缓存对象中，在初始化的时候先从缓存中获取缓存数据渲染到页面...，在获取value的时候会触发防抖机制。...在自定义hooks中如果调用了"setState"或者"dispatch"就会触发整个函数组件的更新，从而能获取到自定义hook中处理后的最新的数据。

2.9K3 0

精读《Hooks 取数 - swr 源码》

Hooks 的威力还不仅如此，上面短短几行代码还自带如下特性：可自动刷新。组件被销毁再渲染时优先启用本地缓存。在列表页中浏览器回退可以自动记忆滚动条位置。...2.5 依赖取数如果一个取数依赖另一个取数的结果，那么当第一个数据结束时才会触发新的取数，这在 swr 中不需要特别关心，只需按照依赖顺序书写 useSWR 即可： function MyProjects...2.7 乐观取数特别在表单场景时，数据的改动是可预期的，此时数据驱动方案只能等待后端返回结果，其实可以优化为本地先修改数据，等后端结果返回后再刷新一次： import useSWR, { mutate...3.3 初始缓存当页面切换时，可以暂时以上一次数据替换取数结果，即初始化数据从缓存中拿： const shouldReadCache = config.suspense || !...4 总结笔者给仔细阅读本文的同学留下两道思考题：关于 Hooks 取数还是在数据流中取数，你怎么看呢？ swr 解决依赖取数的方法还有更好的改进办法吗？

1.3K1 0

FFmpeg简易播放器的实现-音频播放

通过av_read_frame()从媒体文件中获取得到的一个packet可能包含多个(整数个)音频帧或单个视频帧，或者其他类型的流数据。...提供两种使音频设备取得音频数据方法： // a. push，SDL以特定的频率调用回调函数，在回调函数中取得音频数据 // b. pull，用户程序以特定的频率调用SDL_QueueAudio...读队列获取音频包，解码，播放 // 此函数被SDL按需调用，此函数不在用户主线程中，因此数据需要保护 // \param[in] userdata用户在注册回调函数时指定的参数 // \param[out...// 　　　　　否则使用frame(源)和s_audio_param_src(目标)中的音频参数来设置s_audio_swr_ctx，并使用frame中的音频参数来赋值s_audio_param_src...)，表示解码器中改取的帧已取完了(当然缓存帧还是在的)，需要用avcodec_send_packet()向解码器提供新数据。

4K3 0

小邵教你玩转ES6（一）-let，const和解构赋值

这篇文章主要让你学会工作当中常用的es6技巧，以及扩展如实现数据双向绑定，class用es5如何实现、如何给伪数组添加迭代器等等。...都会从浅到深，从入门开始逐步写，希望能让大家有所收获，也希望大家关注我~ 这篇文章主要让你学会工作当中常用的es6技巧，以及扩展如实现数据双向绑定，class用es5如何实现、如何给伪数组添加迭代器等等...' console.log(b) // 1 console.log(c) // 2 // 从这个例子可以看出，在解构赋值的过程中，a=undefined时，会使用默认值 // 那么当a=null时呢？...，通过扩展运算符和Object.assign对对象进行合并的行为，是属于浅拷贝，那么我们在开发当中，经常需要对对象进行深拷贝，接下来我们看看如何进行深拷贝。...这种方式进行深拷贝，只针对json数据这样的键值对有效 // 对于函数等等反而无效，不好用，接着继续看方法二、三。

6371 0

【Android FFMPEG 开发】FFMPEG 音频重采样 ( 初始化音频重采样上下文 SwrContext | 计算音频延迟 | 计算输出样本个数 | 音频重采样 swr_convert )

音频延迟情况 : FFMPEG 转码的过程中 , 可能没有一次性将一帧数据处理完毕 , 如输入了 20 个数据 , 一般情况下 20 个数据都能处理完毕 , 有时还会出现只处理了 19 个 , 剩余的...延迟数据处理方案 : 每次音频处理时 , 都尝试将上一次积压的音频采样数据加入到本次处理的数据中 , 防止出现音频延迟的情况 ; 3 ....对延迟的理解 : swr_get_delay ( ) 获取的是下一次的样本数据 A 输入经过多长时间延迟后 , 才能将样本 A 播放出来 , 这个延迟就是积压的数据的播放时间 , 因此每次处理时将少部分积压数据进行处理..., 可以有效降低音频延迟 ; 5 . swr_get_delay ( ) 函数原型 : 获取下一次输入的样本 , 到对应的样本输出时 , 需要经历的延迟 , 即获取延迟的数据播放时长或样本个数 ( 二选一...FFMPEG 计算音频延迟样本数 swr_get_delay ( ) 函数使用示例 : 这里传入样本采样率 , 获取的是样本个数 ; //OpenSLES 播放器设定播放的音频格式是立体声 , 44100

2.5K2 0

PNAS:人类睡眠中慢波和尖波波纹之间的耦合参与了分布式神经活动

然而，这些相互作用在同步皮质下/皮质神经元活动中的确切作用尚不清楚。本研究利用来自人类海马、杏仁核以及颞叶和额叶皮质的颅内电生理记录来检查SWR过程中的活动调节和跨区域协调。...我们研究了在NREM睡眠的记忆巩固过程中，海马SWR和皮质慢波、纺锤波是如何协调分布式神经元群体的。海马SWR是与制定计划、记忆提取和记忆巩固有关的暂时性局部场电位振荡。...基于SWA在NREM睡眠中的广泛存在，SWA-SWR的时间耦合，以及SWA同步大脑皮层区域的能力，我们假设不同皮层位置的SWA之间的成对相位关系可以预测SWR窗口期间局部皮层群体之间的功能耦合。...使用从表面电极(即脑电、眼电和肌电)收集的多导睡眠图数据，按照标准(图1D)进行睡眠分期。受试者在NREM睡眠中的平均时间为287±44分钟，占夜间睡眠记录持续时间的49.9±4.1%。...最后，在SWR窗口期间，额颞网络中位点对之间的功能耦合与局部SWA之间的相位偏移以及SWR幅度相关。

6302 0

基于 Next.js 的 SSRSSG 方案了解一下？

本文主要是讲讲如何使用 Next.js 框架实现服务端渲染，将有效提升网页的 SEO 和首屏渲染速度，说不定哪天就用上了，是吧！...[1] 同构渲染简单来说就是一份代码，服务端先通过服务端渲染(SSR)，生成 HTML 以及初始化数据，客户端拿到代码和初始化数据后，通过对 HTML 的 DOM 进行 patch 和事件绑定对 DOM...6.3 获取数据（1）静态生成时获取数据在服务端构建生成静态页面之前，有时候需要获取一些数据，可以借助 getStaticProps 方法。...SEO 优化的，其数据通常需要实时更新获取，因此采用 SSR 的方式，而 SSR 在服务端获取数据可以借助 getServerSideProps 方法和构建时获取数据方法类似： export default...Next.js 团队提供了一个基于 React Hooks 的 useSWR 钩子，推荐使用，该钩子会处理缓存、重新验证、焦点跟踪、间隔重新获取等。

5.5K3 0

FFmpeg进行音频的解码和播放

PCM的数据量过高，从而造成存储和传输方面的障碍，因此必须使用相应的技术降低数字信号源的数据率，又尽可能不对节目造成损伤，这就是压缩技术常见的压缩的音频格式WAV，MP3。...ID enum AVCodecID avCodecId = avCodecParameters->codec_id; // 通过获取的ID，获取对应的解码器 AVCodec *avCodec...uint8_t **) inFrame->data, inFrame->nb_samples); //获取实际的缓存大小 int out_buffer_size...进行播放思路：由FFmpeg进行解码，将解码后的数据再通过jni传到Java中的audioTrack对象进行播放创建AudioTrack对象 public class AudioPlayer {...在ffmpeg获取的音频频率和通道数来调用原生的openSl的音频播放 * * @param sampleRate 音频文件的频率 * @param channelCount 通道数

6.5K2 0

SWR删除指定Key

我们在使用React进行前端项目开发时经常会使用到SWR作为请求工具以及处理一部分的状态管理。...SWR在接受的数据请求时会对比本地的useContext中是否缓存了对应的Key如果没有缓存的话才会请求，在管理系统中请求回来的数据经常伴随着增删改。...此时如果我们不对之前请求的缓存进行清除也不对网站进行刷新那么在第二次进入页面时可能会因为缓存数据而出现一些BUG，所以我们通常在对数据进行修改后会对指定的Key进行删除，下次再使用时可以重新请求新数据。...参考:SWR Cache SWR再useSWRConfig中导出了cache对象：图片我们可以再useSWRConfig中导出cache后使用delete函数对缓存进行删除或者修改(set)

1.1K3 0

Redux你是个好人，只是我们不合适

「状态管理」方案如Redux，会将请求的数据序列化后保存在「全局状态」中。...再大范围的状态会使用「状态管理」方案。可以看到，不管对于「IO操作缓存的数据」还是「用户交互的中间状态」，常规方案是：一视同仁。...对于缓存，常见的需求是：数据状态，加载中？加载完成？发生错误？缓存失效后的更新复用缓存数据在React技术栈，SWR、react-query都是优秀的解决方案。这里以SWR举例： ?... } 让我们来看SWR如何满足如上三个需求：数据状态：通过useSWR的返回值参数判断请求状态。比如!error && !data代表「请求中」。...复用缓存数据：SWR会以请求url为key，请求对应promise为value缓存数据，达到多个重复请求复用缓存的目的。

1K2 0

Redux你是个好人，只是我们不合适

「状态管理」方案如Redux，会将请求的数据序列化后保存在「全局状态」中。...再大范围的状态会使用「状态管理」方案。可以看到，不管对于「IO操作缓存的数据」还是「用户交互的中间状态」，常规方案是：一视同仁。...对于缓存，常见的需求是：数据状态，加载中？加载完成？发生错误？缓存失效后的更新复用缓存数据在React技术栈，SWR、react-query都是优秀的解决方案。... } 让我们来看SWR如何满足如上三个需求：数据状态：通过useSWR的返回值参数判断请求状态。比如!error && !data代表「请求中」。...复用缓存数据：SWR会以请求url为key，请求对应promise为value缓存数据，达到多个重复请求复用缓存的目的。

5251 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭