这是一个创建于 339 天前的主题，其中的信息可能已经有所发展或是发生改变。
像是 fetch 这种请求，需要根据某个 state 变化重新请求，例如 pageSize ，大家一般用以下哪种写法（或者自己有更好的也可说一下）：
useEffect：
useEffect(() => {
fetch(`xxx?pageSize=${pageSize}`)
}, [pageSize])
在 state 发生变化的组件调用 fetch：
<Pagination
pageSize={pageSize}
onChange={(pageSize) => {
fetch(`xxx?pageSize=${pageSize}`)
}}
/>
我个人更倾向第二种，第一种 useEffect 看上去更方便，不用第二种需要在每个 state 变化的组件调用 fetch ，但是长期维护下来可能会有意想不到的 bug （公司里有个项目因为缓存的 code 和后端返回的 code 不同，导致 useEffect 调用了两边，自己 dev 环境下 mock 很难察觉）
 |
1 foolishcrab 2025 年 7 月 9 日 via iPhone 1
这是 react fc 出来以后讨论了好几年的问题了，没什么价值。 |
 |
2 donaldturinglee 2025 年 7 月 9 日 via Android第二种比较好的做法是 onChange={handle PageSize}，但是这种方式写起来也挺痛苦的 |
 |
3 vace 2025 年 7 月 9 日 1
const [ pageSize, setPageSize ] = useState(10) const { data } = useSWR(`xxx?pageSize=${pageSize}`, fetch) <Pagination pageSize={pageSize} onChange={setPageSize} /> |
 |
4 realkaiway 2025 年 7 月 9 日 via iPhone 2
我劝你早点用 TanStack Query ，早下班，还优雅 |
 |
5 darkengine 2025 年 7 月 9 日真实情况下，除了 pageSize 还有其他条件，例如 page ，还有 gender 这些，你怎么处理的？ |
 |
6 twk93 2025 年 7 月 10 日单从问题的两个选择来看肯定选第一个，代码好维护。更好的方案就是楼上说的使用 TanStack Query |
 |
8 dabingbing 2025 年 7 月 10 日第一种啊， 两次那是严格模式，生产不会两次 |
 |
9 hwdq0012 2025 年 7 月 10 日严格模式会调 react 函数两次,帮你确定是否是 纯函数 |
 |
10 yhxx 2025 年 7 月 10 日现在流行的是这样的： 你提的两种选一个的话应该是第一种好一些 |
 |
11 kamilic 2025 年 7 月 10 日react-query or swr 都支持 pagination 的特性 |
 |
12 HowardTang 2025 年 7 月 10 日TanStack Query / useSwr |
 |
14 Asuler 2025 年 7 月 10 日选第二种，因为第一种有很恶心的闭包问题，你现在只是写了 pageSize 这个参数而已，实际情况可能还有很多表单参数，你在这里面都拿不到最新的。到时候你要维护，你就不断地往 useEffect 的[]里加，一更新就触发调用了，然而用户更多是想点击查询按钮的时候再去调用接口，而不是表单每个值填上后就触发调接口，到时候你维护起来还得加一堆 if 判断 |
 |
15 dabennn 2025 年 7 月 10 日能不用 useEffect 就不用 useEffect ，参数多起来互相打架，改都改不动 |
 |
18 Plumbiu 2025 年 7 月 11 日@vace 我很好奇这种库和第一种差别，除了封装好更简洁，还有其他好处吗，因为我第一眼觉得 useSWR 参数变了，不还是要重新请求，假如我有个参数 scene ，只有后端区分场景，前端 ui 不可见，使用 uesRef 保存，state 更新岂不会发起二次请求 |
|
19 Plumbiu 2025 年 7 月 11 日@Plumbiu 像是这种，模拟了一下 ```jsx import { useEffect, useRef, useState } from 'react' function useSWR(url: string) { function App() { return ( export default App ``` |
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。