如何使用 React 创建一个简单的加载屏幕

几天前，我发了一篇文章，向大家展示了如何使用 Vue 创建加载屏幕。今天，我们将使用 React 来实现同样的效果！

正如我在上一篇文章中所说，加载屏幕总是受欢迎的，用户不想在页面加载时盯着空白屏幕。

我将向您展示如何操作的方法非常简单，但我们首先需要的是加载 GIF 或动画，这次我将使用Material-ui附带的那个（安装和使用非常简单，但如果您需要任何帮助请告诉我）

安装完成后，我们就可以开始了。就我而言，我需要使用 axios 从 API 中获取一些数据：

const [data, setData] = useState([])

useEffect(() => {
    axios
      .get("https://www.aRandomAPI.com")
      .then((response) => {
            setData((data: any) => [...data, req.data])
      })
      .catch(function (error) {
        ...
      })
  }, [])

明白了吗？我们获取数据并将其赋值给一个变量。但是，如果数据量很大怎么办？如果用户的网速不够快怎么办？这就是为什么我们需要加载页面的原因。

首先我们导入之前讲过的循环进度：

import CircularProgress from '@material-ui/core/CircularProgress'

然后，在返回时，在向用户显示任何内容之前，我们需要检查包含数据的数组是否已加载。一种方法是检查长度是否大于 0。

// App and App-header are classes that comes with "create-react-app"
  return (
    <div className="App">
    <header className="App-header">
       {data.length > 0 ?
           <div>
             Show your data here!
           </div>
         : <div>
             <p>Loading...</p> <CircularProgress /> 
           </div>      
       }
     </header>
   </div>
 );

我们最终会得到这样的结果：

够简单吧？而且它适用于你需要显示的任何类型的数据，非常棒。我在我的第一个 React 应用中使用了这个方法，你可以看看。

无论如何，感谢您的阅读，希望您喜欢它！

更多信息请见：https://blog.daviddiazh.dev

查看我的第一个 React App：https://guessthesubredd.it

文章来源：https://dev.to/dd8888/how-to-create-a-simple-loading-screen-using-react-ph0