由于项目使用 React, React-Router, Redux 来开发项目,采取了前端渲染的方式(如果采用 ssr 就不会有这个问题)。
问题
所以每到一个页面,需要发一个初始化的请求来获取页面数据,然后重新渲染页面,所以之前一个页面从请求到加载完毕的流程是这样的:
|
|
首先是路由匹配,然后准备加载组件,
使用通过 Reducer
里面的初始化 state
进行 render
,
然后触发 ComponentDidMount
事件,
在这个事件里面去 dispatch
一个执行页面初始化的请求的 Action
,
请求成功过以后触发组件的重新渲染。
可以看到,展示最终的页面需要组件重新渲染两次。
一次是使用写死在前端的 reducer
里面的 initialState
数据来渲染,
一次是在拿到后端数据进行的渲染。
所以有的时候会出现闪屏的情况,用户体验很不好。
我们的要求是进页面以后就是用从后台获取的最新数据渲染的页面,
整个页面只会 render
一次。
那么怎么解决这个问题呢?
解决方案
要解决这个问题,那么必然是加载好数据后,再去挂载页面组件,
那么加载数据的时机就显得尤为重要。
借鉴传统服务端渲染页面的方式,这个时机肯定是放在路由里面去做比较合适。
具体到项目里面,就是在 react-route
里面的 onEnter
事件里面去做页面的初始化请求,
当所有数据请求成功以后,在去加载这个页面。
整个页面加载的流程就变成了这样:
|
|
具体代码如下:
HomeAction.js
|
|
HomeReducer.js
|
|
Router.js
|
|
Index.js
|
|