React18不再适用的useEffect请求初始数据方式
您好，我是本际云服务器推荐网的小编小本本。首先，让我们来看一下在useEffect中请求初始数据的方式：
useEffect(() => {
fetch(xxx).then(data => setState(data.json()))
}, [])
然而，这种方式在React18及以后已经不再适用了。
React官方不推荐这种方式的原因
在Reddit上，Dan回答了上述问题。这是一个普遍的问题。除了React外，大部分以组件形式组织的前端框架都有类似的API：effect、didMount/didUpdate。当在初始化时请求数据的需求，框架基本上执行的都是回调函数内请求操作，并在数据返回后更新状态。但是，React很“独特”，官方不推荐这种形式书写代码（通过严格模式下useEffect执行两次放大这个问题）。React这样做，是为了项目的性能以及UX（用户体验）。
解决useEffect请求数据遇到的问题的好方式
在Meta公司内部，基于Relay驱动数据，请求数据要求使用GraphQL，所以这套架构比较难在社区普及开。但是，现在社区已经有了成熟的请求数据的方案。对于SSR，可以使用Next.js、Remix接管数据请求。对于CSR，可以使用ReactQuery、useSWR接管数据请求。上述解决方案都是十分成熟，当然如果你有其他解决方案，建议参考React新文档中下面两篇文章：使用effect同步数据、你可能不需要使用effect。注意，中文可以看的总结，记住在React新文档：不要滥用effect哦。
总结一下，React18之后不再推荐在useEffect中请求数据的方式，而推荐使用ReactQuery、useSWR等框架接管数据请求。
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7338.html
相关推荐
-
正则表达式知识分享
正则表达式知识分享 我是本际云服务器推荐网的小编小本本，今天给大家分享一下正则表达式的知识。 正则表达式简介 正则表达式主要是使用指定规则来匹配相应的字符串信息。最初是由Unix中…
-
单实例ADG搭建
单实例ADG搭建 作为本际云服务器推荐网的小编小本本，今天给大家介绍一下单实例ADG的搭建过程。 步骤 以下是ADG搭建的具体步骤： 开启强制日志SQL：ALTER DATABAS…
-
三言两语RR与RC那点事
数据库隔离级别简介 从事数据库开发和运维的人员或多或少都了解过关于数据库隔离级别的概念。SQL标准将事务隔离级别分为读未提交(read uncinnutted),读已提交(read…
-
应用Docker制做Python自然环境联接Oracle镜像系统
Python自然环境联接Oracle镜像系统实例详细说明 小编本本在这里向大家介绍一下如何应用Docker制做Python自然环境联接Oracle镜像系统实例。感兴趣的小伙伴可以参…
-
一个简单的参数调整数据库整体性能提升n倍
小编介绍 我是本际云服务器推荐网的小编小本本，今天要给大家分享一个简单的参数调整，就可以让数据库整体性能提升n倍的经验。 事件背景 某驻场客户一单机环境12.2.0.1数据库要进行…
-
电汇和转账的区别(手机号转账是转到哪里？)
手机号转账：钱到哪里去了？ 手机号转账是将钱转到你填写的收款人账户里，包括收款人的名称、账号和开户行等信息。使用手机号转账只是为了替代输入银行卡号，更方便快捷，但需要注意填写正确的…
-
ES安全管理和用户管理
ES安全管理 作为一名小编，我将为大家介绍ES安全管理和用户管理。在测试环境配置ES用户登录前，需要采取一系列措施。首先，我们需要开启ES用户登录验证并生成证书。 为集群创建一个c…
-
优化网站访问速度的利器——nginx多域名（附：nginx多域名的使用方法）
引言 在互联网时代，网站访问速度是用户体验中极为重要的一环。优化网站访问速度，对于提高用户体验和搜索引擎排名都有着重要意义。本文将介绍一种优化网站访问速度的利器——nginx多域名…
-
宝塔面板ftp端口怎么查看?宝塔面板ftp端口怎么设置?
如何查看宝塔面板FTP端口？ 如果你使用的是宝塔面板，想要查看FTP端口，那么可以按照以下步骤操作： 1. 登录宝塔面板，进入网站所在的控制台。 2. 点击左侧面板的”…
-
PG级联流复制部署步骤
PG级联流复制部署步骤 本文将介绍PG级联流复制部署步骤。当前业务生产库使用的是ORCLE—DG架构，计划使用PostgreSQL作为替代品，并使用一主多从的情况，为了减轻主库压力…