如何防止使用 Firebase 存储重新渲染反应状态答案

【问题标题】：How to prevent re-rendering of react state with firebase storage如何防止使用 Firebase 存储重新渲染反应状态
【发布时间】：2022-09-27 13:43:05
【问题描述】：

我正在使用 Firebase 存储来获取图像文件。即使我尝试获取一个图像文件，我仍然会得到至少 2 次重新渲染。我怎样才能让它只渲染一次？任何帮助是极大的赞赏。

import React, {useState, useEffect} from \'react\'
import {ref, getStorage, getDownloadURL,
        getMetadata, listAll} from \"firebase/storage\";
import {storage, db} from \"../../utils/firebase\";

const AdminProject = () => {
  const storage = getStorage();

  useEffect(() => {

      const fetchData = async () => {
        const img = await ref(storage, \'images/godot.png\');
        const res = await getMetadata(img);

        console.log(\"RES\", res);        
      };

      fetchData();      
  }, []);

  return (
    <div id=\"admin-project\">
      <div id=\"admin-project-container\">

        <h3>Admin Project</h3>

      </div>
    </div>
  )
}

export default AdminProject

反应中的渲染很好。多次重新渲染组件是可以的。
一种选择是使用 React 的 Suspense 功能以及兼容的库，以对 Suspense 友好的方式处理异步负载。在这里，根据您计划对图像执行的操作，您可能希望加载它以在子组件中显示。或者，如果您显示它很多，您可能想要缓存它。

标签： reactjs firebase firebase-storage

【解决方案1】：

这也是我实现它的方式，我不认为这是一个问题。重新渲染是否会导致问题？

【讨论】：