Javascript 在Ionic React中使用UsionViewDiCenter钩子重新呈现数据

我正在使用

useIonViewDidEnter

hook从服务器异步获取数据。对于本例，我创建了一个虚拟数组来显示重新渲染行为。有人能解释一下为什么即使在我导航到其他选项卡之后，数据也会在控制台中填充吗。这会影响应用程序的性能吗？这能做得更好吗？如有任何建议，我们将不胜感激

  const [cars, setCars] = useState([] as any);

  const carsList = [{ name: "BMW" }, { name: "Audi" }, { name: "Benz" }];

  useIonViewDidEnter(() => {
    setCars(carsList);
  });

  console.log(cars);

---

我使用创建了一个工作示例。有人能帮忙吗？

根据我对命令式编程语言（如javascript）的观察，他们实际上是在调用方法之前先处理值的，我猜这可能就是这里实际发生的事情。 让我们做个实验：

function a(){
  console.log("A");
}

function b(calback){
  console.log("B");
    setTimeout(()=>{
    calback(true);
  },2000);//regardless of the delay, this got evaluated before the function that called it get called, quite confusing but if you understand the fact that the value needs to be evaluated then it's clear.
}

function c(){
  a();
  b(function(calback){
   x = calback;
  });

  console.log("C", x);
  console.log("D");  
}

c();

注1：虽然这有点道理，但可能还有更多

注2：这不应降低应用程序的性能，除非您正在做除console.log之外的另一项昂贵的工作

---

改进的方法是简单地删除导航后的所有内容，因为这样做更有意义，因为您已经导航过，不需要接下来发生的任何事情。

爱奥尼亚框架将所有页面保留在DOM中，当您更改位置时，组件始终在那里呈现

可以通过设置标志来控制渲染，以告知组件是否可见

const Tab1: React.FC = () => {
  const [cars, setCars] = useState([] as any);
  const [visible, setVisible] = useState(true);

  useIonViewDidEnter(() => {
    console.log("useIonViewWillEnter");
    setCars(carsList);
    setVisible(true);
  });

  useIonViewWillLeave(() => {
    console.log("useIonViewWillLeave");
    setVisible(false);
  });

  if (!visible) return null;

  console.log(cars);

  return ( 
    // RENDER THE REAL TAB CONTENT
  )
}
export default React.memo(Tab1);

查看潜在的解决方案：