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

，用到了

[email protected]

，所以会读取

.../项目名/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}

，这个就可以让子页面显示出来。

1. config.js
   

   里还配置了

   base: '/base/', publicPath: '/base/'
   

   ，会让所有url都带上前缀

   /base
   

   ，所以实际上上方的所有url都有这个前缀，例如

   http://localhost:8000/base/dashboard/analysisTms
   

四、其它备注

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