解决React首屏加载白屏的问题

众所周知，在项目中如果在资源加载请求还未完成的时候，由于阻塞机制，会出现首页白屏的问题，产生很差的用户体验。本文以react为例，提供一个解决方法。

解决原理：使用  onreadystatechange  去监听 readyState，在资源加载完成之前加载一个只有框架的静态页面，页面不请求数据。当数据请求完成之后再将路由切换到真实的首页。

废话不多说，上代码：

main.js

import React from ‘react‘import ReactDom from ‘react-dom‘import {Provider} from ‘react-redux‘import {BrowserRouter as Router, Route} from ‘react-router-dom‘import configureStore from ‘./store‘import Index from ‘./containers/Index.js‘import FirstScreen from ‘./containers/FirstScreen.js‘

export const store = configureStore()

function listen () {    if (document.readyState == ‘complete‘) { // 资源加载完成        ReactDom.render(            <Provider store={store}>                <Router>                    <Route path="/" component={Index}/>                </Router>            </Provider>,            document.getElementById(‘root‘)        )    } else { // 资源加载中        ReactDom.render(            <Provider store={store}>                <Router>                    <Route path="/" component={FirstScreen}/>                </Router>            </Provider>,            document.getElementById(‘root‘)        )    }}

document.onreadystatechange = listen

其中Index.js就是你的真实首页，FirstScreen.js就是只有框架的静态页。

Index.js

import React, {Component} from ‘react‘import PropTypes from ‘prop-types‘import {connect} from ‘react-redux‘import {store} from ‘../main‘import {bindActionCreators} from ‘redux‘import {getLocalTime} from ‘../actions/localTime‘import LocalTime from ‘../components/LocalTime‘import ‘../static/css/Index.css‘

class Index extends Component {    /**     *  constructor() React组件的构造函数在挂载之前被调用。     *  在实现React.Component子类的构造函数时，     *  应该super(props)在任何其他语句之前调用。     *  否则，this.props会在构造函数中定义，这可能会导致错误。     */    constructor (props) {        super(props)        this.realTime = this.realTime.bind(this)    }

realTime () {        setInterval(() => {            store.dispatch(getLocalTime())        }, 1000)    }

/**     *  componentWillMount()会在组件render之前立即被调用，并且永远都只执行一次。     *  由于这个方法始终只执行一次，所以如果在这里定义了setState方法之后，页面永远都只会在加载前更新一次。     */    componentWillMount () {    }

/**     *  componentDidMount()在组件被装载后立即被调用。     *  在这个时候之后组件已经生成了对应的DOM结构。     *  可以在这个方法中执行setTimeout, setInterval，接口调用等。     */    componentDidMount () {        this.realTime()    }

/**     *  componentWillReceiveProps()在组件接收到一个新的prop时被执行。     *  这个方法在初始化render时不会被调用。     */    componentWillReceiveProps () {    }

/**     *  返回一个布尔值。在组件接收到新的props或者state时被执行。     *  在初始化时或者使用forceUpdate时不被执行。     *  如果shouldComponentUpdate返回false,     *   render()则会在下一个state change之前被完全跳过,componentWillUpdate和 componentDidUpdate也不会被执行     */    shouldComponentUpdate (nextProps, nextState) {        return true    }

/**     * componentWillUpdate()在组件接收到新的props或者state但还没有render时被执行。     * 在初始化时不会被执行。     */    componentWillUpdate (nextProps, nextState) {    }

/**     * componentDidUpdate()在组件完成更新后立即执行。     * 在初始化时不会被执行。一般会在组件完成更新后被使用。     * 可以用来 clearInterval。     */    componentDidUpdate (prevProps, prevState) {        clearInterval(this.realTime())    }

/**     *  render()函数应该是纯粹的，这意味着它不会修改组件状态，     *  每次调用时都会返回相同的结果，并且不会直接与浏览器交互     */    render () {        const {localTime} = this.props        return (            <div className=‘main‘>                <LocalTime localTime={localTime} getLocalTime={getLocalTime}></LocalTime>            </div>        )    }}

Index.propTypes = {    localTime: PropTypes.string,    getLocalTime: PropTypes.func}

// 将state绑定到propsconst mapStateToProps = (state, ownProps) => {    const {localTime} = state    return {        localTime: localTime.localTime    }}

// 将action绑定到props上const mapDispatchToProps = (dispatch, ownProps) => {    return {        getLocalTime: bindActionCreators(getLocalTime, dispatch)    }}

// 通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上export default connect(mapStateToProps, mapDispatchToProps)(Index)

FirstScreen.js

import React, {Component} from ‘react‘import {connect} from ‘react-redux‘import ‘../static/css/FirstScreen.css‘

class FirstScreen extends Component {    constructor (props) {        super(props)    }

render () {        return (            <div className=‘firstScreen‘>                我是首屏空白页            </div>        )    }}

export default connect()(FirstScreen)

示例代码托管在GitHub上：https://github.com/skillnull/TheCurrentTime