文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

数据突变（mutate） 当我们调用 useSWR 这个 hook 时，它会自动为我们发送请求，例如我们刚刚进入页面时调用就会去获取渲染页面的初始数据，那如果我们知道当前页面的数据已经变更了要如何重新请求呢...这里我们可以发现 mutate 方法如果只能通过 hook 的方式获取的话，我们就只能在 组件或者自定义 hook 中实现一些重新请求逻辑了，但有时我们需要在例如普通函数中触发重新请求该怎么办呢？...hook ，实际使用的过程中还会出现 hook 嵌套的情况，例如我需要获取用户的列表，再根据某个用户的 id 去获取相应的用户详情。...这里需要注意一下，在 React 官方文档中提到了 hooks-rules[4] ： 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们...这个规则其实与上述的例子没有太大关联，React 文档中的规则是为了 避免 state 混乱，而上面的例子则是告诉大家 调用 useSWR 要尽量在同一个时机以避免重复请求 ，大家不要混淆了。

2.2K10

128. 精读《Hooks 取数 - swr 源码》

可以配置的有：suspense 模式、focus 重新取数、重新取数间隔/是否开启、失败是否重新取数、timeout、取数成功/失败/重试时的回调函数等等。...2.5 依赖取数 如果一个取数依赖另一个取数的结果，那么当第一个数据结束时才会触发新的取数，这在 swr 中不需要特别关心，只需按照依赖顺序书写 useSWR 即可： function MyProjects...乐观取数，表示对取数结果是乐观的、可预期的，所以才能在结果返回之前就预测并修改了结果。...的一些细节 从源码可以看到更多细节用心，useSWR 真的比手动调用 fetch 好很多。...我们看 useSWR 取数函数的主体逻辑： try { // 设置 isValidation 为 true // 取数、onSuccess 回调 // 设置 isValidation 为 false

1.5K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    基于 LeanCloud 的无后端评论库 Nexment，于任何 Web 应用或前端项目使用

    同时，这样的部署有几个影响用户体验的问题： 高度获取需要暴力的循环获取直到评论区页面加载完毕 新评论发布无法处理回调，评论区高度无法更新 移动端样式不统一 有了这些痛点，同时借机最近发现的 LeanCloud...，但在浏览器引用时会出现 LeanCloud 无法请求的问题，于是换为使用 Web Component 对浏览器支持。...通过 useSWR Hook 和 mutate 函数获取数据及更新的样例如下： /* * ListGet: Function, * pageKey: string */ const { data,...(Context); 子组件调用父组件方法 在 React 中直接将父组件方法作为参数传递至子组件调用即可。...Vue 中是通过 ID 获取的元素，React 中通过 useRef Hook 可获取到当前组件的 DOM，样例如下: const nexmentTextarea: any = React.useRef

    1.2K20

    用react-query解决你一半的状态管理问题

    这里，推荐使用React-Query管理服务端状态。 ? 另一个可选方案是SWR[1]。...不仅如此，React-Query还为我们做了如下工作： 多个组件请求同一个query时只发出一个请求 缓存数据失效/更新策略（判断缓存合适失效，失效后自动请求数据） 对失效数据垃圾清理 数据的CRUD由...2个hook处理： useQuery处理数据的查 useMutation处理数据的增/删/改 在下面的例子中，点击「创建用户」按钮会发起创建用户的post请求： import { useQuery,...当请求成功后，会触发onSuccess回调，回调中调用queryCache.invalidateQueries，将userData对应的query缓存置为invalidate。...这样，React-Query就会重新请求userData对应query的数据。 总结 通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。

    3.1K10

    Vue 3.0 这个迷人的小妖精，到底好在哪里？（更新原理对比）

    如果你是一个新接手这个文件的人，你如何迅速的分辨清楚这个method是和某两个data中的字段关联起来的？...React Hook 和 Vue Hook 对比 其实 React Hook 的限制非常多，比如官方文档中就专门有一个章节介绍它的限制： 不要在循环，条件或嵌套函数中调用 Hook 确保总是在你的 React...遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。...对调用顺序没什么要求，每次渲染中不会反复调用 Hook 函数，产生的的 GC 压力较小。...在渲染后发现 count 发生了变化，会执行 useEffect 中的回调函数。

    1.9K10

    自定义Hooks解析

    error: undefined, loading: false }); // 如果配置了成功的回调则调用成功的回调...error, loading: false }); // 如果配置了失败的回调则调用成功的回调...类，每次调用run的时候会调用fetch实例的run函数，在实例的run函数中做了节流和防抖的处理，并且会触发我们自定义hooks的setFeches从而触发视图更新。...我们自定义一个Fetch类的好处就是可以扩展很多功能，其中就包括已经实现的节流、防抖、成功和失败的回调、格式化结果，快速改变返回数据，取消请求、屏幕聚焦重新请求等功能。...在自定义hooks中如果调用了"setState"或者"dispatch"就会触发整个函数组件的更新，从而能获取到自定义hook中处理后的最新的数据。

    3.3K30

    （和 React Hook 的详细对比）

    如果你是一个新接手这个文件的人，你如何迅速的分辨清楚这个method是和某两个data中的字段关联起来的？...React Hook 和 Vue Hook 对比 其实 React Hook 的限制非常多，比如官方文档中就专门有一个章节介绍它的限制： 不要在循环，条件或嵌套函数中调用 Hook 确保总是在你的 React...对调用顺序没什么要求，每次渲染中不会反复调用 Hook 函数，产生的的 GC 压力较小。...在渲染后发现 count 发生了变化，会执行 useEffect 中的回调函数。...扩展阅读 对于两种 Hook 之间的区别，想要进一步学习的同学还可以看黄子毅大大的好文： 精读《Vue3.0 Function API》 尤小右在官方 issue 中对于 React Hook 详细的对比看法

    1.5K10

    （和 React Hook 的详细对比）

    如果你是一个新接手这个文件的人，你如何迅速的分辨清楚这个method是和某两个data中的字段关联起来的？...React Hook 和 Vue Hook 对比 其实 React Hook 的限制非常多，比如官方文档中就专门有一个章节介绍它的限制： 不要在循环，条件或嵌套函数中调用 Hook 确保总是在你的 React...对调用顺序没什么要求，每次渲染中不会反复调用 Hook 函数，产生的的 GC 压力较小。...在渲染后发现 count 发生了变化，会执行 useEffect 中的回调函数。...扩展阅读 对于两种 Hook 之间的区别，想要进一步学习的同学还可以看黄子毅大大的好文： 精读《Vue3.0 Function API》 尤小右在官方 issue 中对于 React Hook 详细的对比看法

    2.1K20

    应战Vue3 setup，Concent携手React出招了！

    所以在react基于Fiber的链表式树结构可以模拟出函数调用栈后，hook的诞生就相当于是顺势而为了，但是hook只是给函数组件撕开了一个放置传送门的口子，这个传送门非常神奇，可以定义状态，可以定义生命周期函数等...fetch data体验的useSWR，当然也有不少开发开始慢慢沉淀自己的业务hook 包。...} = useSWR(() => '/api/projects?...hook和class的开发流程是不一样的，两者之间互相共用逻辑已经不可能 基于这些问题的存在，Concent的setup诞生了，巧妙的利用hook这个传送门，让组件初次渲染时执行setup，从而开辟了另一个空间...ctx.watch('tip', (tipVal)=>{// 观察到tip值变化时，触发的回调 if(tipVal === 'xxx' ){//当tip的值为'xxx'时，就定义一个新的副作用函数

    5.6K101

    前端高频react面试题

    如何解决 props 层级过深的问题使用Context API：提供一种组件之间的状态共享，而不必通过显式组件树逐层传递props；使用Redux等状态库。React Hook 的使用限制有哪些？...React Hooks 的限制主要有两条：不要在循环、条件或嵌套函数中调用 Hook；在 React 的函数组件中调用 Hook。那为什么会有这样的限制呢？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...setState 的第二个参数是一个可选的回调函数。这个回调函数将在组件重新渲染后执行。等价于在 componentDidUpdate 生命周期内执行。...// 第二个参数是 state 更新完成后的回调函数什么是 PropsProps 是 React 中属性的简写。

    4.6K20

    React 16.8.6 升级指南（react-hooks篇）

    ---- 如何理解Hooks 官网定义hook说它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性，言简意赅。...在onClick的回调函数中调用了useState返回的setCount函数，这个函数可以更新count，到这里都比较好理解，就是this.setState的感觉。...用class组件的话肯定是在onChange的回调里做文章，每次触发就发送一次请求。...先看看都依赖了些哪些变量，在useEffect中依赖了fetchData这个请求数据的函数，每当fetchData变化时，就会发出请求，fetchData是由useFetch这个自定义hook返回的，在...useFetch中使用了useCallback，它会返回一个回调函数，这个回调函数会在依赖项也就是传进来的count变更时返回一个新的回调函数，也就是说count变化过后，fetchData也会发生变化

    3.1K30

    最近几周react面试遇到的题总结

    该函数会在setState设置成功，且组件重新渲染后调用。合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。...callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。...于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。...effectList 队列中，遍历更新即可在dom操作前，会异步调用 useEffect 的回调函数，异步是因为不能阻塞渲染在 dom 操作之后，会同步调用 useLayoutEffect 的回调函数...对componentWillReceiveProps 的理解该方法当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()

    1.2K60

    React-Hook最佳实践

    ， React 根据这些列表的值是否有改变，决定渲染完之后，是否执行这个副作用的回调如果不传这个参数，React 会认为这个 effect 每次渲染然之后都要执行，等同于 componentDidUpdate...是不是和 this.state 和 this 的属性很像在类组件中，如果是不参渲染的属性，直接挂 this 上就好了，如果需要参与渲染的属性，挂在 this.state 上同样的，在 Hook 中，useRef...可用于在 React 开发者工具中显示自定义 hook 的标签。...类似 Vue 组件用的 name 或者 React 组件中的 displayName，不影响代码运行组件复用React Hook 有自定义 Hook，React 类组件有高阶组件或者渲染属性 有个比较常见的场景...Hook 中的闭包问题，大多还是由于依赖项没有填写导致闭包带来的问题，比类组件 This 的更加恼人，主要调试不好发现问题，填不填依赖项也是一个让人纠结的活Hook 的依赖不能自动识别，必须手动声明，虽然有插件辅助添加

    4.5K30

    React常见面试题

    ，但是转化为了函数回调的嵌 参考资料： React 中的 Render Props (opens new window) # React如何进行组件/逻辑复用？...服务端渲染）中，componentWillMount生命周期会执行两次，导致多余请求 在react16进行fiber重写后，componentWillMount 可能在一次渲染中多次调用 react17...【hook执行位置】不要在循环、条件 、嵌套中调有hook，必须始终在react函数顶层使用Hook，这是因为react需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数，否则会导致调用顺序不一致性...【返回事件池】在每个 EventPlugin 中根据不同的事件类型返回 【取出合成事件】从事件池中取出，如为空，则创建 【取出回调函数】根据元素nodeid(唯一标识key) 和事件类型 从listenerBink...中取出 回调函数 【返回合成事件】返回带有合成事件参数的回调函数 参考资料： 【React深入】React事件机制 (opens new window) # react事件与原生事件的区别？

    5.4K20

    前端实用技巧 | 自定义React Hook实战指南，轻松搞定自定义React Hook设计

    今天主要分享，我是如何实现自定义React Hook的，以及自定义React Hook具体有哪些适用场景。二、什么是自定义React Hook？...自定义React Hook是一个JavaScript函数，其名称以use开头，并且可以调用其他Hook。...useEffect用于在组件挂载时发起数据请求，并在请求完成后更新状态。useFetch返回一个包含数据、加载状态和错误信息的对象。2. 表单处理表单处理是前端开发中的另一个常见需求。...useInterval接受一个回调函数和延迟时间作为参数，并在指定的时间间隔内重复执行回调函数。...提供清晰的API自定义Hook的返回值应该尽量简洁和直观，避免返回过多的数据或复杂的结构。清晰的API可以使得Hook更易于使用和理解。

    1.3K20

    2022前端面试官经常会考什么

    它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义hook，可以复用代码逻辑。...EMAScript5版本中，绑定的事件回调函数作用域是组件实例化对象。EMAScript6版本中，绑定的事件回调函数作用域是null。（7）父组件传递方法的作用域不同。...3) componentWillUpdate与 componentWillReceiveProps 类似，许多开发者也会在 componentWillUpdate 中根据 props 的变化去触发一些回调...但不论是 componentWilReceiveProps 还 是 componentWilUpdate，都有可能在一次更新中被调用多次，也就是说写在这里的回调函数也有可能会被调用多次，这显然是不可取的...中 的 回 调 迁 移 至 componentDidUpdate 就可以解决这个问题。

    1.4K20

    三种React代码复用技术

    React 代码复用 如何自己编写一个 react hook？react 允许我们自己编写 Hook。 场景 我们有几个组件，它们都要先进行 ajax 请求，获取到数据，然后把数据渲染到页面上。...使用 render-props 解决了高阶组件的不足，使用 组件 + render 回调的方式避免的 props 的属性值覆盖问题。...Fetch 组件把 state 的数据传递给了 render 函数，这会让 App 组件在其它地方很难使用到 render 函数中的数据（或者说只能在 render 函数中使用数据），比如 useEffect...自定义 Hook 需要遵循下面几点要求： 自定义 Hook 是一个函数，其名称以 use 开头； 自定义的 Hook 函数，函数内部可以调用其他的 Hook，函数的参数可以自由决定； 不要在循环，条件或嵌套函数中调用...Hook，只在最顶层使用 Hook； 只在 React 函数中调用 Hook，不要在普通的 JavaScript 函数中调用 Hook； 改造 App 组件中内容： import React, { useState

    2.7K10

    写给初中级前端的高级进阶指南（JS、TS、Vue、React、性能、学习规划）

    关于这篇文章中为什么slot-scope不生效的问题，你不能看他的文章讲解都一头雾水。...版本，你可以提前学习Hook相关的开发模式了，面向未来的异步请求管理是zeit/swr这种自定义Hook库所带来的。...测试自定义Hook how-to-test-custom-react-hooks React和TypeScript结合使用 这个仓库非常详细的介绍了如何把React和TypeScript结合，并且给出了一些进阶用法的示例...state-colocation-will-make-your-react-app-faster 仔细思考React组件中的状态应该如何管理，优先使用派生状态，并且在适当的时候利用useMemo、...dont-sync-state-derive-it React Hooks的自定义hook中，如何利用reducer的模式提供更加灵活的数据管理，让用户拥有数据的控制权。

    7.1K89
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券