由于项目使用 React, React-Router, Redux 来开发项目,采取了前端渲染的方式(如果采用 ssr 就不会有这个问题)。
问题
所以每到一个页面,需要发一个初始化的请求来获取页面数据,然后重新渲染页面,所以之前一个页面从请求到加载完毕的流程是这样的:
Route match -> ComponentWillMount -> render -> ComponentDidMount -> dispatch(init())-> render -> componentDidUpdate
首先是路由匹配,然后准备加载组件,使用通过 Reducer
里面的初始化 state
进行 render
, 然后触发 ComponentDidMount
事件,在这个事件里面去 dispatch
一个执行页面初始化的请求的 Action
react-router 提供简单有强大 API 来方便我们在React
搭建的单页面中实现路由功能。
首先看一个简单的例子:
import React from "react"
import { findDOMNode, render } from "react-dom"
import { Link, Route, Router } from "react-router"
let Page1 = React.createClass({
render() {
return (
<div>
<h1>Page1</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ab accusantium animi dicta dignissimos earum eos esse impedit ipsum iste