我想知道是否在useEffect上获取是一个很好的实践,或者它实际上是初学者的错误。据我所知,当url被改变时,状态会消失,所以在这个例子中,变量data
应该是新的空(设置为null)变量,对吗?
(下面的代码是我的一个骨架例子,为了这个帖子的问题目的)。
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
const response = await fetch('https://myserver.com/data');
const json = await response.json();
setData(json);
};
return (
<div>
{data ? (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
}
我应该尝试在本地存储所有数据吗?还是经常调用服务器是正常的?应该是React。在某种程度上涉及到备忘录吗?
这是非常固执己见的,这就是为什么你的问题被否决。以下是我的看法:
这不是"坏习惯"。从某种意义上说,是的,有"更先进的"。(不一定是更好的)构建代码的方法,但是如果你不获取信息来提供给你的实时的,不断变化的网站,那么你打算如何为你的用户保持动态?
你能做些什么来改进你的代码?
首先,如果你有&;static&;用户id等数据;Name,一旦用户登录了那么你可能不需要每次调用或再次显示它们时都获取这些值。您可以简单地假设,只要登录了用户,并且使用该用户的有效令牌发出请求,那么将这些信息临时保存在React.context
中,然后提供给组件可能是一个好主意。
这样做,您还可以在登录后从服务器预取任何相关数据。这是一个共同的理念,应该避免不必要的获取,因为它们通常会减慢你的应用程序,因为你在等待它们更新你的UI。
在大多数情况下,你通常会从相同的数据服务器获取,这意味着你可以,作为一个例子,开始包装你的获取调用到它自己的脚本文件(或多个文件在同一个文件夹下专门用于那些)。这将允许你有一个单一的获取调用源,这意味着当你的应用程序变大时,任何需要的更改都将来自同一个地方,调试也会变得容易得多,并且它将从你的组件渲染逻辑中消除不必要的混乱。
我个人认为,在开发大型应用程序时,分离通信(获取、套接字等)、呈现和静态数据是很有帮助的。这并不总是正确的,而且非常固执己见。
我希望这有帮助,我没有犯任何重大错误,请随时纠正我。