在本文中，您将学习如何为React应用程序开发漂亮的启动屏幕。此屏幕将帮助用户了解你的应用程序正在加载重要数据，并且它没有卡住。如果需要，可以在GitHub存储库的初始屏幕分支中检查本文中开发的最终代码。先决条件在阅读本文之前，您应该对JavaScript和React有一定的了解。如果你不能从上一篇文章中学习如何使用安全的应用程序。除此之外，你还需要同时具备NPM和节点.js安装在您的机器中。如果你没有，请检查这个页面安装这两个。"了解如何利用高阶组件为React应用程序创建漂亮的启动屏幕。"在推特上留言防溅屏正如Wikipedia所定义的，启动屏幕是一个图形控制元素，由一个包含图像、徽标和软件当前版本的窗口组成，有哪些云服务器，通常在游戏或程序启动时出现。启动屏幕的主要目标是让用户知道程序处于加载重要数据的状态，然后才能开始使用程序。你可能会想，"我的React应用程序需要启动屏幕吗？"答案和往常一样，是"视情况而定"。如果你的React应用不需要超过几毫秒就可以准备好，那么你可能不需要启动屏幕。但是，有时你的应用程序需要加载一些数据或处理一些非常重要的进程，淘客app开发，以至于在完成之前显示任何东西都没有意义。在这些情况下，你的应用程序（主要是你的用户）可能会从漂亮的启动屏幕中获益。在本文中，您将从GitHub克隆一个React应用程序，该应用程序将面临这种情况。为了有用，您要克隆的React应用程序需要在两个不同的提供程序中创建/检查会话：Firebase和Auth0。Firebase提供了一个实时数据库，在接受请求之前可能需要经过身份验证的用户（您将使用的React应用就是这样）。Auth0是一种身份服务，它允许用户对你的应用进行身份验证，可能需要半秒钟来检查用户会话。如您所见，在这个React应用程序中，两个服务都需要一些时间来初始化会话，然后才能让用户继续。这种情况本身就已经是在React应用程序中实现启动屏幕的好场景。然而，使其成为启动屏幕更好的场景的原因是Firebase只能在Auth0完成初始化自己的会话之后才能初始化会话。Firebase对0进行身份验证，因为这是用户使用的身份验证。所以，没有办法同时初始化两者。React应用程序上的启动屏幕为React应用程序开发初始屏幕的最佳方法是将其定义为高阶组件（HOC）。如果你不知道什么是HOC或如何使用它，不要担心。正如您在开发初始屏幕时将看到的，方法和概念非常简单。但是，您可能会受益于HOC的官方定义：高阶组件（HOC）是一种先进的组件逻辑重用技术。HOC本身不是React API的一部分。它们是从React的组成性质中产生的一种模式。具体地说，高阶组件是一个接受组件并返回新组件的函数。—React。也就是说，HOC只不过是一个函数，它获取另一个组件作为参数，并根据情况生成具有不同功能的新组件。在本例中，您将创建一个HOC，它将获得一个组件（整个应用程序），并在应用程序加载所需状态时返回初始屏幕。然后，当应用程序完成加载此状态时，你的组件将允许它呈现并隐藏初始屏幕。为React应用程序开发启动屏幕既然您知道了为什么您可能需要在React应用程序中使用启动屏幕，并且知道（从概念上）如何实现它，现在是时候看到整个概念的实际应用了。因此，如前所述，物联网断路器，您将从克隆一个预先存在的React应用程序开始，该应用程序的加载时间不太快。为此，请打开一个终端，移动到通常保存项目的目录中，然后执行以下命令：#克隆样本git克隆https://github.com/auth0-blog/react-splash-screen#移动到克隆的应用程序cd反应喷溅屏#安装所有依赖项npm安装#运行应用程序export REACT_APP_AUTH0_DOMAIN=博客-samples.auth0.com网站export REACT_APP_AUTH0_CLIENT_ID=6QfrEoazULfAssc0NqqGhfKkb7mumsCJ导出REACT_APP_AUTH0_重定向_URI=http://localhost：3000个npm启动注意：上面的export命令使用demo Auth0帐户的详细信息创建环境变量。如果您有自己的帐户，可以在Auth0仪表板中创建一个SPA，并用其详细信息替换上面的环境变量。最后一个命令将使你的应用程序运行并在默认的web浏览器上打开它（即，它将打开：3000（在您的浏览器中）。现在，正如你所看到的，在一开始，应用程序只提供了一个登录按钮。如果您单击此按钮，应用程序会将您重定向到Auth0登录页面，您可以在该页面上对自己进行身份验证。身份验证后，什么是物联网应用技术，Auth0会将您重定向回您的应用程序（即：3000），您将面临以下行为：在您到达应用程序的那一刻，您将看到与登录前相同的屏幕（使用"登录"按钮）。然后，一两秒钟后，你会注意到屏幕"闪烁"（更新），现在它显示了你的名字、注销按钮和书籍列表。当你的应用程序加载你的会话并加载图书列表时，它显示了错误的状态。通过查看应用程序一秒钟，您和您的用户可能会觉得您实际上没有登录，并且出现了问题。为了解决这个问题，你将在你的应用程序中添加一个启动屏幕，它将正确地通知你的用户应用程序正在加载。添加启动屏幕组件当你的应用启动并运行后，你接下来要做的就是创建一个名为withSplashScreen.js在./src/components目录下。请注意，与其他组件不同，此组件的名称以with前缀开头。这是React开发人员的常见模式。每次构建HOC时，以with开头是一个很好的做法。因此，创建此文件后，您将在其中插入以下代码：导入React，{Component}来自'React'；从'../Auth'导入auth0Client；导入'./splash-屏幕.css';函数加载消息（）{返回(

请稍候，我们正在加载你的应用程序。