react项目启动加载过程个人笔记(Ant Design Pro)

一、前言

最近在看前端react项目，在此总结下react项目启动加载过程，启动后是怎么显示首页的。(Ant Design Pro项目)

PS：需要大概了解下React与ES6

二、react项目启动加载过程

1.项目依赖安装与本地启动

以本人的项目为例，是Ant Design Pro项目；

下载好项目后，首先需要安装依赖（node_modules）：

npm install

然后，查看package.json文件，发现其中有：

  "scripts": {
    ......
    "start": "cross-env APP_TYPE=site umi dev",
    ......
}

因此，项目启动命令就是：

npm run start

//npm start 也可以，是 npm run start 的简写

项目启动后，端口默认是8000，如果想修改，可以把package.json改成这样：

"start": "cross-env APP_TYPE=site umi dev --port=8111",

2.加载manifest.json

项目启动后，会先读取 .../项目名/src/manifest.json 这个文件。

3.使用config.js

本人的项目是Ant Design Pro，用到了umi@2.13.13，所以会读取.../项目名/config/config.js文件，其中有：

//这个引入了同级目录下的router.config.js文件
import pageRoutes from './router.config';

export default {
  ......
  // 这里配置路由
  routes: pageRoutes,
   
   //这个是前端给后台发请求(get/post等)时的规则，注意这个只是本地启动生效，打包后不生效（打包后放到服务器、是nginx里配置类似的这种东西的）
   //例如，发送：http://localhost:8000/base/server/user/getInfo   （端口应该是启动时默认的那个8000，改了后也会改；发送请求时一般用相对路径，默认框架会自动加前缀）
   //最终发送的是：http://10.123.123.123:8181/server/user/getInfo  （可以填测试服务器后端地址，方便本地调试）
   proxy: {
    '/base/server/user/': {
      target: 'http://10.123.123.123:8181',
      pathRewrite: { '^/base': '' }, // 最终请求时候忽略掉base
      changeOrigin: true,
    },
  },
  
  manifest: {
    basePath: '/',
  },

  //这里配置了base，会让项目启动后、浏览器显示的url带上前缀/base/
  base: '/base/',
  
  //这里配置了base，是静态资源访问路径（如果打包后项目在base文件夹下/静态资源在base文件夹下，就可以这样写）
  publicPath: '/base/',
}

而.../项目名/config/router.config.js文件中，又有：

export default [
  // user
  {
    path: '/user',
    component: '../layouts/UserLayout',
    routes: [
      {
        path: '/user',
        redirect: '/user/login',
      },
      {
        path: '/user/login',
        name: 'login',
        component: './User/Login',
      },
    ],
  },
  
  // app
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      // 首页
      {
        path: '/',
        redirect: '/dashboard/analysisTms',
      },
      {
        path: '/dashboard',
        name: 'dashboard',
        icon: 'dashboard',
        routes: [
          {
            path: '/dashboard/analysis',
            name: 'analysis',
            component: './Dashboard/Analysis',
          },

  ......
  

因此，当项目启动后、默认打开http://localhost:8000/时，会加载项目名/src/layouts/BasicLayout.js页面。（react中页面写在js里）

4.首页BasicLayout.js

这个页面就可以算是本人的项目的首页了。

这个页面还有些逻辑，也在此记录下：
(1)这个页面中，有个逻辑：

import Redirect from 'umi/redirect';

-----------------------------

    const isLogin = sessionStorage.getItem('user');
    
    if (!isLogin) {
      return <Redirect to="/user/login" />;
    }

意思是，如果没有登录，就重定向到http://localhost:8000/user/login页面；

这时，因为上面router.config.js里配置了：

  // user
  {
    path: '/user',
    component: '../layouts/UserLayout',
    routes: [
      {
        path: '/user',
        redirect: '/user/login',
      },
      {
        path: '/user/login',
        name: 'login',
        component: './User/Login',
      },
    ],
  },

注意的点：
(1)因为访问的是http://localhost:8000/user/login的url，所以会先加载项目名/src/layouts/UserLayout.js页面（在UserLayout.js页面内会加载项目名/src/pages/User/Login.js页面）
(2)当访问http://localhost:8000/user时，会走path: '/user', redirect: '/user/login',这段，然后重定向到http://localhost:8000/user/login，然后同上，先加载UserLayout.js页面，在这个js内部再加载Login.js页面
(3)如果删掉path: '/user', redirect: '/user/login',这段，再访问http://localhost:8000/user，就会报错404，说明这段是有用的。（就是只有 path: '/user', component: '../layouts/UserLayout',不行，需要有routes里的相同path的内容）

5.页面UserLayout.js

这个页面中，有：

  render() {
    const {
      children,
    } = this.props;
    console.log("children-----",children)

    return (
        <div>
          <div>father</div>
          <div>{children}</div>  
        </div>
    );
  }
  

(1) 其中，const { children, } = this.props;是ES6写法，可以理解为：const children = this.props.children;

(2)url访问的是http://localhost:8000/user/login，上方router.config.js里，配置了/user要显示的页面是当前这个UserLayout.js页面（这个相当于父页面）；然后在这个页面中，从this.props里拿到了children，children就是component: './User/Login'，也就是项目名/src/pages/User/Login.js页面。

(3) <div>{children}</div> 里，会把子页面显示出来；这样写的好处是，父页面可以固定样式不变，只根据不同的url显示不同的子页面。

6.返回首页BasicLayout.js

第5步是没有登录的情况，会跳转到UserLayout.js。
(1)如果登录后，再访问http://localhost:8000/，就会走完父页面BasicLayout.js；
(2)与上方类似，接着按照redirect: '/dashboard/analysisTms',这段，重定向到http://localhost:8000/dashboard/analysisTms；
(3)由于/dashboard没有配置compoment，所以会直接到 path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis',，也就是子页面是项目名/src/pages/Dashboard/Analysis.js。
(4)与上方类似，父页面BasicLayout.js中也有{children}，就可以让子页面显示出来。

三、启动页面加载顺序总结

1.项目启动后，会先加载manifest.json。（PS：菜鸟教程说，manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头；但是Ant Design Pro项目里开始页面并没有在这里指定…）

2.项目启动后，会打开http://localhost:8000/。（可以修改默认启动端口，例如修改package.json的启动命令为"start": "cross-env APP_TYPE=site umi dev --port=8111"）

3.项目会加载config.js，其中引入了router.config.js；因为在router.config.js里配置了component: '../layouts/BasicLayout'，因此父页面就是BasicLayout.js

4.在router.config.js里配置了redirect: '/dashboard/analysisTms'，以及component: './Dashboard/Analysis' ，因此会重定向到http://localhost:8000/dashboard/analysisTms，此时父页面是BasicLayout.js，子页面是Analysis.js

5.父页面BasicLayout.js里有{children}，这个就可以让子页面显示出来。

6.config.js里还配置了base: '/base/', publicPath: '/base/'，会让所有url都带上前缀/base，所以实际上上方的所有url都有这个前缀，例如http://localhost:8000/base/dashboard/analysisTms

四、其它备注

1.本文属于个人笔记，可能逻辑有些混乱，还请见谅。
2.本人初学react，目标是可以快速上手开发前端页面即可；可能哪里不太准确，可以评论区留言，看到后会修改，谢谢。