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

一次。

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

解决方案

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

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