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

系统管理员 2024-03-30 13:19 49阅读 0赞

## 一、前言 ##

最近在看前端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，目标是可以快速上手开发前端页面即可；可能哪里不太准确，可以评论区留言，看到后会修改，谢谢。