前端技术从Vue到React 18系列
, ,

从Vue到React 18系列 - 5.Vue全家桶的迁移

以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

查看更多
前端技术从Vue到React 18系列
, ,

从Vue到React 18系列 - 4.Vue常用函数及用法的迁移

以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就好。

查看更多
前端技术从Vue到React 18系列
, ,

从Vue到React 18系列 - 3.组件的用法迁移

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

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

父子组件通信

父传子

1、使用props传递属性

2、使用ref

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

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

查看更多
前端技术从Vue到React 18系列
, ,

从Vue到React 18系列 - 2.组件的基本知识

以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;

查看更多
前端技术工程搭建
, ,

Nest.js基础搭建与MySQL单表CRUD的操作

安装相关依赖

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, //自动扫描实体
};

查看更多
前端技术Next.js
, ,

Next.js文档 - 3.数据获取-SSG

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） => 用户请求该页面（可被复用）

查看更多
前端技术Next.js
, ,

Next.js文档 - 2.数据获取-SSR

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，则：

查看更多
前端技术Next.js
, ,

Next.js文档 - 1.页面

页面（Pages）

Next.js 13 采用了beta版的目录结构（/app）。新结构默认支持layouts（布局）、嵌套路由、服务器端渲染组件。与此同时你可以在layout中获取整个应用的数据，包括支持更精细粒度的嵌套布局。

在Next中，page是从pages文件夹下的js、jsx、ts、tsx文件中导出的React组件。每个页面都根据其文件名与路由相关联。

例：这是一个对应/about路由的组件pages/about.js

1
2
3
export default function About() {
  return <div>About</div>
}

查看更多