从零开始react项目07

异步组件资源加载 为什么要异步加载？

到目前为止，我们所实现的简书项目是这样子的：
在一开始就已经把所有的页面：首页、详情、登录页面等全部加载了进来。因此我们在点击登录详情时，会非常快的跳转过去，而当整个项目比较大的时候，首页的加载就会因为要加载所有内容文件而变得非常慢
改进方法：
一开始的首页只加载首页选项，而不加载其他页面的资源
只有用户点击其他页面，需要加载这一页面内容时，才加载；

具体 *** 作

（因为npm install react-loadable失败，外加detail组件我并未改造成基于react-redux的store形式，就没有实现这个部分）

react-loadbale插件withRouter组件
比如详情页，我们想，只有点击进入详情页时，才加载详情页 detail文件夹下新建一个loadable文件

import Loadable from 'react-loadable';
import React from 'react';
const LoadableComponent = Loadable({
    loader: () => import('./index'),//这里的./index指的就是detail/index.js
    loading() {
        return <div>正在加载</div>//在加载等待过程中可以显示一个等待页面，这里简单输出一句话
    }
});
export default ()=><LoadableComponent/>

App.js中，修改引入设置

import Details from "./pages/detail";
改为下面这样
import Details from "./pages/detail/loadable";

然后运行就会发现报错了。
为什么？
因为路由

<BrowserRouter>
	。。。
   <Route path="/detail" exact component={Details}></Route>
 </BrowserRouter>

现在是通过接入loadable.js接入的detail组件，导致LoadableComponent是可以接触到路由信息的，但是它内部包裹的detail/index.js无法接触到，因此报错
解决方法，用withRouter使detail/index.js可以接触到路由信息

detail/index.js中做少量修改

import { withRouter } from "react-router";
import { connect } from "react-redux";
。。。。
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Details))

项目上线

项目上线时，前端把自己预设的API文件夹删除掉，然后npm run build,
生成文件夹交给后端，任务完成

项目总结 react基本语法react-redux实现数据、行为分离redux-thunk实现action的函数式返回immutable模块实现数据严格不变，以免出错react-loadable实现异步组件资源加载，加快页面渲染速度react-router-dom模块实现单页面应用的页面跳转styled-components实现组件的样式互不干扰ant-design的图标引入

建议：只会应用而已，还建议看看源码，知道他是怎么实现的
最终的部分效果如下：