V2EX 前天 00:01
[问与答] 提问一个 React 的问题
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

文章探讨了React组件中根据状态变化进行fetch请求的不同实现方式,对比了useEffect和组件事件处理两种方法,并指出后者在长期维护中的优势。

像是 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 很难察觉)

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

React fetch请求 状态管理 组件优化
相关文章