Javascript 在ReactJS中加载时添加加载动画

我想添加一个加载动画到我的网站，因为它加载了相当多的时候进入网站。它内置于ReactJS和NodeJS中，因此我需要特别了解ReactJS如何在最初进入站点时添加加载动画，以及在渲染新组件时何时有加载时间

所以有没有一种方法可以让人们在我的网站上，虽然它还没有完全加载，所以我可以添加一个加载页面与一些CSS3动画作为加载屏幕。 问题不是如何制作加载动画。更多的是关于如何将其集成到ReactJS中

---

非常感谢。

由于ReactJS虚拟DOM速度非常快，我假设最大的加载时间是由异步调用造成的。您可能正在某个React生命周期事件中运行异步代码（例如，

componentWillMount

）

在HTTP调用所用的时间内，应用程序看起来是空的。要创建加载程序，您需要保持异步代码的状态

不使用Redux的示例

我们的应用程序中将有三种不同的状态：

• 请求：数据已请求但尚未加载
• 成功：数据返回成功。没有发生错误
• 失败：异步代码失败，出现错误

当我们处于请求状态时，我们需要渲染微调器。一旦数据从服务器返回，我们将应用程序的状态更改为

SUCCESS

，这将触发组件重新呈现，我们在其中呈现列表

从“React”导入React
从“axios”导入axios
常量请求='REQUEST'
const SUCCESS='SUCCESS'
常量失败='FAILURE'
导出默认类列表扩展React.Component{
建造师（道具）{
超级（道具）
this.state={状态：请求，清单：[]}
}
componentDidMount（）{
get（'/api/listing/12345'）
.然后（功能（响应）{
this.setState（{清单：response.payload，状态：SUCCESS}）
})
.catch（函数（错误）{
this.setState（{listing:[]，status:FAILURE}）
})
}
renderSpinner（）{
返回（'正在加载…'）
}
渲染列表（列表，idx）{
返回(
{listing.name}
)
}
RenderStings（）{
返回this.state.listing.map（this.renderListing）
}
render（）{
返回this.state.status==请求？this.renderSpinner（）：this.renderStings（）
}
}

使用Redux的示例 使用Redux和中间件，您几乎可以做类似的事情

Thunk中间件允许我们发送属于函数的操作。因此，它允许我们运行异步代码。在这里，我们正在做与上一个示例中相同的事情：跟踪异步代码的状态

导出默认函数promiseMiddleware（）{
返回（下一步）=>（操作）=>{
const{promise，type，…rest}=action
如果（！承诺）返回下一步（操作）
常量请求=类型+“\u请求”
const SUCCESS=type+“\u SUCCESS”
常量失败=类型+“\u失败”
下一步（{…rest，键入：REQUEST}）
回报承诺
。然后（结果=>{
下一步（{…rest，result，type:SUCCESS}）
返回真值
})
.catch（错误=>{
如果（调试）{
控制台错误（错误）
console.log（error.stack）
}
下一步（{…rest，error，type:FAILURE}）
返回错误
})
}
}

谢谢，但我想这不是我想要的。一旦网站加载（主索引路径），页面之间的加载就很容易了。我试图实现的是在与网站的初始连接上加载动画。我希望你明白我的意思。