Question

在带有Gatsby React设置的网站的首页上，我有一个NavbarExtra组件，该组件通过api显示一些数据。来自该端点的数据每天都会更改几次。

现在的想法是优化获取，因此尽可能少地进行获取，因此api尽可能在后面使用，这对它有一定的限制（不同的付费计划）。

这种情况应该是，只要用户进入该站点，该提取将仅一次发生。然后，用户可以四处逛逛，甚至可以通过提取来关闭组件，然后再次返回到进行提取的首页。

现在，如果用户仅在首页上，则在导航菜单中调用该组件： {isLandingPage && <NavBarData/>}，并在该组件中执行以下操作：

useEffect(() => {
    fetch(
      'https://endpoint',
      {
        method: 'GET',
        headers: {
        },
      }
    )
      .then(response => {
        if (response.status >= 200 && response.status <= 299) {
          return response.json();
        }
        throw Error(response.statusText);
      })
      .then(data => {
        const { result } = data.quoteResponse;
        setNumbers(result));
      })
      .catch(error => {
        console.log(error);
      });
  }, 0);

首先，我想问一下如何进行此提取，以便api在后面尽可能多地使用，以便用户获取最近的数据，并且仅在例如重新加载页面时才再次获取它？

其次，我了解了有关单页应用程序和静态网站生成器的一些概念（如此处使用的盖茨比），并且可能已经正确理解了，如果我想在不同页面（甚至isLandingPage以外的其他页面）上使用获取的数据该网站，我可以将其用于在不同页面上投放的一个组件中，而在输入的每个页面上都不会重新提取？

Answer 1

您可以创建一个Parent组件来fetches数据，并且可以将data检索给子代，因此您每次会话只能控制一个组件中的一次提取，或任何您需要的地方。在这种情况下，根据您的体系结构，您可以使用简单的state或context API在多个嵌套组件上重用此数据。

其他解决方案可能涉及使用localStorage，因此您可以存储在localStorage上获取的数据并在任何组件上重用此数据，您只需要在需要时更新数据即可。

如何在React Gatsby网站上优化此提取

1 个答案: