react页面渲染之前_React 单页面初始化渲染优化

59 阅读 0 评论 39 点赞

我是靠谱客的博主着急小海豚，最近开发中收集的这篇文章主要介绍react页面渲染之前_React 单页面初始化渲染优化，觉得挺不错的，现在分享给大家，希望可以做个参考。

由于项目使用 React, React-Router, Redux 来开发项目，采取了前端渲染的方式(如果采用 ssr 就不会有这个问题)。

问题

所以每到一个页面，需要发一个初始化的请求来获取页面数据，然后重新渲染页面，所以之前一个页面从请求到加载完毕的流程是这样的：

Route match -> ComponentWillMount -> render -> ComponentDidMount -> dispatch(init())-> render -> componentDidUpdate

首先是路由匹配，然后准备加载组件，使用通过 Reducer

里面的初始化 state

进行 render

, 然后触发 ComponentDidMount

事件，在这个事件里面去 dispatch

一个执行页面初始化的请求的 Action

，请求成功过以后触发组件的重新渲染。

可以看到，展示最终的页面需要组件重新渲染两次。一次是使用写死在前端的 reducer

里面的 initialState

数据来渲染，一次是在拿到后端数据进行的渲染。

所以有的时候会出现闪屏的情况，用户体验很不好。

我们的要求是进页面以后就是用从后台获取的最新数据渲染的页面，整个页面只会 render

一次。

那么怎么解决这个问题呢？

解决方案

要解决这个问题，那么必然是加载好数据后，再去挂载页面组件，那么加载数据的时机就显得尤为重要。

借鉴传统服务端渲染页面的方式，这个时机肯定是放在路由里面去做

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。