React 函数仅在重新访问页面后运行一次

Question

我试图让我的函数运行一次且仅运行一次，即使在重新访问页面时也是如此。以此为例（或查看此StackBlitz演示）：

import React, { useEffect } from "react";
import { Route, Switch } from "react-router-dom";
import { BrowserRouter as Router, NavLink } from "react-router-dom";

const TestOne = () => {
  useEffect(() => {
    console.log("useEffect one");
  });

  return (
    <div>
      <NavLink to="/">Home</NavLink>
      <p>test one</p>
    </div>
  );
};

const TestTwo = () => {
  return (
    <div>
      <NavLink to="/test">One</NavLink>
      <p>test two</p>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/test" component={TestOne} />
        <Route path="/" component={TestTwo} />
      </Switch>
    </Router>
  );
};

export default App;

当您第一次访问该/test页面时，控制台会正确记录useEffect one. 然而，当您访问/然后返回时/test，控制台再次记录 - 我怎样才能让它只记录一次？

我问的原因是因为在我真实的非演示应用程序中，有从 API 获取的数据，而且我知道最好使用更少的资源，并且每当该页面打开时都不必从 API 重新获取数据再次访问。

Answer 1

处理一次性获取的最佳方法是使用：

const App 函数内的 USEEFFECT

const App = () => {
 useEffect(() => {
    console.log("useEffect one");
  },[]);
  return (
    <Router>
      <Switch>
        <Route path="/test" component={TestOne} />
        <Route path="/" component={TestTwo} />
      </Switch>
    </Router>
  );
};

它会渲染一次，直到您刷新页面，但在它周围导航时不会控制台记录它。