研究动机

公司从22年底开始全面将uniapp项目切换至Vue3 + Vite + TypeScript
技术栈，但HbuilderX直到本文编写时也依然存在很多问题，比如语法检查服务崩溃、无法跳转代码引用等，开发体验非常差，经常出现一个组件打开全是红线或没法进行代码补全的情况，Vue3和Vite带来的开发速度优势基本在这方面全还回去了。

基于如上痛点，我在一个工作相对清闲的下午对HbuilderX的启动机制进行了研究并写了一份运行在命令行里的uniapp编译调试脚本，可以使用它来甩掉HbuilderX来进行dev阶段的开发工作。该文章以微信小程序举例，H5也大同小异。

懒得看哔哔叨叨，只想捞代码来用？请直接阅读脚本代码和使用流程两节

调试 && 分析

首先使用微软的DebugView
尝试查看调试信息，没想到HbuilderX真的有很多Debug级别的输出，乐。

1
2

[16764] 2023-05-16 09:50:20.583 [INFO:] node "D:/HBuilderX/plugins/node/node.exe"
[16764] 2023-05-16 09:50:20.583 [INFO:] args ("--max-old-space-size=2048", "--no-warnings", "D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/vite-plugin-uni/bin/uni.js")

以Vue2为主要参考对比，辅以部分Vue3概念，向React 18迁移的CookBook

React Hook

React Hook既强大又灵活，它在有状态的函数式组件中十分重要。由于本人学习React的时间很短，尚不敢打包票说自己对Hooks有如何深刻的了解，故在此分享一些读过的文章以作参考学习之用。

• React官方文档-Hooks
• 理解 React Hooks

以Vue2为主要参考对比，辅以部分Vue3概念，向React 18迁移的CookBook

路由管理：从Vue-Router到React-Router

在本文编写时，React-Router实为React-Router-Dom V6，Vue-Router为Vue-Router V4（为了易于接受，文中大部分例子使用V3举例说明，V4的例子会特别标注出）。下文简称“React中”及“Vue中”。

部分参考自React-Router-Dom6 最佳实践、React-router 路由的使用及配置、React-Router官方文档（写的不容易懂）、React-Router官方文档Examples、vue-router和react-router使用的异同点

首先安装依赖

1

yarn add react-router-dom

以Vue2为主要参考对比，辅以部分Vue3概念，向React 18迁移的CookBook

在React中实现Computed、Watch

实现Watch

类组件中通过componentDidUpdate访问变化前的props和states

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class Test extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      count: 0
    }
  }
  componentDidUpdate(prevProps: any, prevState: any) {
    console.log(prevState.count)
    console.log(this.state.count)
  }
  clickCount() {
    this.setState((state: any) => ({
      count: state.count + 1
    }));
  }
  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.clickCount.bind(this)}>点我</button>
      </div>
    )
  }
}

函数式组件中写个Hook就好。

以Vue2为主要参考对比，辅以部分Vue3概念，向React 18迁移的CookBook

React中的父子组件通信、自定义事件、事件处理

父子组件通信

父传子

1、使用props传递属性

2、使用ref

父组件通过React.createRef()创建Ref，保存在实例属性myRef上。父组件中，渲染子组件时，定义一个Ref属性，值为刚创建的myRef。

父组件调用子组件的myFunc函数，传递一个参数，子组件接收到参数，打印出参数。

以Vue2为主要参考对比，辅以部分Vue3概念，向React 18迁移的CookBook

React类组件/Vue Options组件

上述示例中均以函数式组件为示例。但是在学习React的过程中，类组件依然是一个绕不开的话题。React的类组件之于函数式组件就类似Vue3中的script
setup之于Vue2的选项式API。

来自React官方文档的Clock组件：Clock.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import React from "react";

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

export default Clock;

以Vue2为主要参考对比，辅以部分Vue3概念，向React 18迁移的CookBook

创建Vite-React工程

用点新东西吧。

1
2

yarn create vite react-study --template react-ts && cd ./react-study && yarn install
yarn add @types/node --dev

配置vite.config.ts

安装相关依赖

1
2
3

yarn global add @nestjs/cli
nest new mydblog-server --strict && cd mydblog-server
yarn add typeorm @nestjs/typeorm mysql

配置数据源

src/config/Database.ts

1
2
3
4
5
6
7
8
9
10
11
12
13

import { TypeOrmModuleOptions } from '@nestjs/typeorm';

export const AppDataSource: TypeOrmModuleOptions = {
  type: 'mysql',  //别的也行
  host: '数据库IP',
  port: 数据库端口号,
  username: '用户名',
  password: '密码',
  database: '待连接的数据库',
  synchronize: true,  //同步表结构
  logging: true,  //打印日志
  autoLoadEntities: true, //自动扫描实体
};

getStaticProps（SSG使用）

当你在一个Page中导出了getStaticProps 函数，那么Next将会在构建时使用getStaticProps返回的数据预生成这个页面。

1
2
3
4
5

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

请注意，无论渲染类型是什么，任何props都将被传递到页面组件上，并可以在客户端得到的初始HTML中被查看，这是为了让页面能够被正确地水合。请确保你没有将任何不应在客户端上出现的敏感信息传递给props。

PS：SSG页面的生命为：声明getStaticProps => Next构建（build） => 用户请求该页面（可被复用）

getServerSideProps（SSR使用）

当你在一个Page中导出了getServerSideProps函数，那么Next将会在每次页面请求前使用getServerSideProps返回的数据进行预渲染。

1
2
3
4
5

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

请注意，无论渲染类型是什么，任何props都将被传递到页面组件上，并可以在客户端得到的初始HTML中被查看，这是为了让页面能够被正确地水合。请确保你没有将任何不应在客户端上出现的敏感信息传递给props。

getServerSideProps何时运行

getServerSideProps仅在服务器端运行，从不在浏览器上运行。如果页面使用getServerSideProps，则：