Taro 2​

Taro 2 是一个重编译时轻运行时的框架，主要是通过编译时的转换来实现跨端能力。

它绑定了 React 的 DSL, 因此可以通过 React 语法来写小程序

• 编译时: 通过 babel 插件将 React 语法转换成小程序原生的语法
• 运行时: 主要处理生命周期、事件、setData等, 运行时和 React 并没有关系

静态 template 转动态 JSX 相对简单, 但是反过来却十分困难。这是因为 JSX 过于灵活, Taro 2 采用穷举法来处理对 JSX 的适配, 工作量大。

Taro 3​

Taro 3 是一个重运行时轻编译时的框架，主要是通过运行时的转换来实现跨端能力。

通过 Webpack 的 ProvidePlugin 插件，注入到小程序的逻辑层。

Taro 3 的 React 适配​

本质上是实现了一个 React 的自定义 Renderer, 通过 taro-react 包来连接 react-reconciler 和 taro-runtime。

具体实现过程分为以下两步:

1. 实现 react-reconciler 的 hostConfig 配置, 即在 hostConfig 的方法中调用对应的 Taro BOM/DOM 的 API
2. 实现 render 函数(类似于 ReactDOM.render)方法, 可以看成是创建 Taro DOM Tree 的容器

经过上面的步骤后, 在小程序的运行时就可以生成 Taro DOM Tree, 这个过程和 React 的渲染过程类似。

Taro DOM Tree 到小程序视图层的渲染过程分为以下步骤:

1. 将小程序所有的组件挨个进行模板化处理, 从而得到小程序组件对应的 template
2. 基于 template 将 Taro DOM Tree 进行递归渲染

Taro 3 的 Vue 适配​

React 和 Vue 在开发时区别那么大，其实在实现了 BOM/DOM API 之后，它们之间的区别就很小了。

Vue 和 React 最大的区别就在于运行时的 CreateVuePage 方法，这个方法里进行了一些运行时的处理，比如：生命周期的对齐。

优缺点​

优点:

• 无 DSL 限制: 能用 React/Vue 的语法来写小程序
• 新特性无缝支持: 由于 Taro3 的本质是将 React/Vue 的运行时注入到小程序中，因此可以直接使用 React/Vue 的新特性，比如 Hooks、Composition API 等。

缺点:

• 和 Kbone/Remax 等运行时框架/库类似, 性能上肯定不及 Taro2/uni-app 的静态模板编译方案
• 初始渲染需要使用 setData 传递全量的模板渲染描述数据,初始渲染性能较低
• 视图更新时的性能完全取决于更新幅度

运行时优化​

编译时所做的工作越多, 那运行时所做的工作就越少, 性能也会越好

• Taro DOM Tree 的构建和更新
• setData 优化

精简 DOM/BOM API​

精简了 DOM/BOM API 的实现, 只保留了小程序所需的 API, 这样可以减少运行时的代码体积。

setData 优化​

• 在数据更新阶段, Taro3 的更新时 DOM 级别的, 比 Data 级别的更新更高效。因为 Data 粒度的更新实际上是有冗余的, 并不是所有的 Data 改变都会引起 DOM 更新。
• 跟新的时候将 Taro DOM Tree 的 path 进行压缩, 这点多少能够提升点性能

包 size​

随着项目的增加，页面越来越多，原生的项目 WXML 体积会不断增加，而 Taro3 不会。也就是说，当页面的数量超过一个临界点时，Taro3 的包体积可能会更小。这是因为 Taro3 的组件 template 是固定的, 然后基于组件 template 去递归渲染。

类型​

原始类型​

• boolean: 表示布尔值 (true 或 false)。
• number: 表示数字（支持整数和浮点数）。
• string: 表示字符串。
• null: 表示 null 值。
• undefined: 表示 undefined 值。
• symbol: 用于创建唯一值的类型。

复杂类型​

• 大整数类型: bigint。
• 数组类型：[] 或 Array<T>。
• 对象类型：{}。
• object 类型：object, 表示非原始类型。
• Object 类型：所有类型（包括原始类型）的基类。
• 元组类型：[T1, T2, ...]。
• 枚举类型：enum。
• 函数类型：(args) => returnType。
• 类类型：class。
• 接口类型：interface。
• 泛型类型：<T>。
• 类型别名：type。
• any 类型：any。
• unknown 类型：unknown。
• void 类型：void。
• never 类型：never。
• Promise 类型：Promise<T>。

联合类型​

语法形式：

let value: string | number;
type Direction = "up" | "down" | "left" | "right";

使用：
只有在对联合的每个成员都有效的情况下才允许操作。

function example(value: string | number) {
  // 报错 toUpperCase 不属于 number 类型上的方法
  console.log(value.toUpperCase());
}

可以使用类型保护来进一步确定类型。

function example(value: string | number) {
  if (typeof value === "string") {
    // 这里 TypeScript 知道 value 是 string 类型
    console.log(value.toUpperCase());
  } else {
    // 这里 TypeScript 知道 value 是 number 类型
    console.log(value * 2);
  }
}

当处理对象的属性时，in 运算符可以用来检查对象是否具有某个属性：

type Bird = { fly: () => void };
type Fish = { swim: () => void };

function move(animal: Bird | Fish) {
    if ('fly' in animal) {
        animal.fly();
    } else {
        animal.swim();
    }
}

合并联合类型

type UnionA = 'px' | 'em' | 'rem' | '%';

type UnionB = 'vh' | 'em' | 'rem' | 'pt';

type IntersectionUnion = UnionA & UnionB; // 'em' | 'rem'

类型缩减

type URStr = 'string' | string; // 类型是 string

type URNum = 2 | number; // 类型是 number

type URBoolen = true | boolean; // 类型是 boolean

enum EnumUR {
  ONE,
  TWO
}

type URE = EnumUR.ONE | EnumUR; // 类型是 EnumUR

交叉类型​

语法形式：

type Useless = string & number;

枚举类型​

语法形式：

enum Day {
  SUNDAY = 'SUNDAY',
  MONDAY = 'MONDAY',
  TUESDAY = 'TUESDAY',
}  

数字枚举

enum Day {
  SUNDAY = 1,
  MONDAY,
  TUESDAY,
}

会从1开始数字递增

函数类型​

基本的函数类型定义：

function add(x: number, y: number): number {
    return x + y;
}

函数表达式类型定义：

type Fn = (x: number, y: number) => number;
let myAdd: Fn = function(x: number, y: number): number { return x + y; };

this 定义：

function say(this: Window, name: string) {
    console.log(this.name);
}

window.say = say;
window.say('hi');
const obj = {
    say
};

obj.say('hi'); // ts(2684) The 'this' context of type '{ say: (this: Window, name: string) => void; }' is not assignable to method's 'this' of type 'Window'.

函数重载
根据传递的参数类型不同，函数可以有不同的行为。可以为同一个函数声明多个类型签名。

function double(value: number): number;
function double(value: string): string;

function double(value: any): any {
    if (typeof value === "number") {
        return value * 2;
    } else if (typeof value === "string") {
        return value.repeat(2);
    }
}

console.log(double(5));       // 输出: 10
console.log(double("abc"));   // 输出: abcabc

函数类型谓词
语法形式：参数名 + is + 类型

function isString(value: unknown): value is string {
  return typeof value === "string";
}

类型断言​

语法形式：

1. 尖括号语法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

2. as 语法（推荐使用）：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

3. ! 非空断言（不推荐，用类型守卫代替）：

let someValue: string | null | undefined;
// 使用非空断言，告诉编译器 someValue 不是 null 或 undefined
console.log(someValue!.length);

类型别名​

语法形式：

type Age = number;
type Point = {
  x: number;
  y: number;
};
type ID = number | string;

类型守卫（缩小类型）​

使用类型守卫来区分联合类型的不同成员，常用的类型守卫包括 switch、字面量恒等、typeof、instanceof、in 和自定义类型守卫。 switch

 const convert = (c: 'a' | 1) => {
    switch (c) {
      case 1:
        return c.toFixed(); // c is 1
      case 'a':
        return c.toLowerCase(); // c is 'a'
    }
  }

字面量恒等

  const convert = (c: 'a' | 1) => {
    if (c === 1) {
      return c.toFixed(); // c is 1
    } else if (c === 'a') {
        return c.toLowerCase(); // c is 'a'
    }
  }

typeof

  const convert = (c: 'a' | 1) => {
    if (typeof c === 'number') {
      return c.toFixed(); // c is 1
    } else if (typeof c === 'string') {
        return c.toLowerCase(); // c is 'a'
    }
  }

instanceof

class Dog {
  wang = 'wangwang';
}
class Cat {
  miao = 'miaomiao';
}

const getName = (animal: Dog | Cat) => {
  if (animal instanceof Dog) {
    // Dog
    return animal.wang;
  } else if (animal instanceof Cat) {
    // Cat
    return animal.miao;
  }
}

in

class Dog {
  wang = 'wangwang';
}
class Cat {
  miao = 'miaomiao';
}

const getName = (animal: Dog | Cat) => {
  if ('wang' in animal) { 
    // Dog
    return animal.wang;
  } else if ('miao' in animal) { 
    // Cat
    return animal.miao;
  }
}

is

const isDog = function (animal: Dog | Cat): animal is Dog {
  return 'wang' in animal;
}
const getName = (animal: Dog | Cat) => {
  if (isDog(animal)) {
    return animal.wang;
  }
}

类型兼容​

泛型​

概述​

动态规划（Dynamic Programming，简称DP）是一种算法设计思想，用于解决具有重叠子问题和最优子结构性质的问题。它通过将复杂问题分解为较小的子问题，避免重复计算相同的子问题，从而提高计算效率。
基本思想可以概括为以下几个步骤：

1. 定义子问题：将原问题分解为多个子问题。通常，子问题的解能够组合成原问题的解。
2. 确认状态：定义问题的状态，一般通过一个或多个变量来描述当前的子问题。例如，在求解最长公共子序列的问题中，状态可以用两个变量来表示序列的长度。
3. 状态转移方程：找出子问题之间的关系，即状态转移方程。这些方程描述了如何从一个或多个子问题的解得到原问题的解。
4. 初始条件和边界情况：确定动态规划的初始条件，即最基本的子问题的解，以及边界情况。
5. 求解和优化：通过迭代或递归方式求解所有子问题，得到最终的解。

概述​

比起 antv/x6 的 v1版本，antv/x6 v2 提升了渲染性能(异步)，解决了 v1 时期存在的 react 节点挂载问题。

依赖调整​

业务模块的包（hmde/hlod）不再单独安装 antd/x6 依赖，全部抽离到公共模块（apaas）。统一让公共模块进行 x6 打包，业务模块采用联邦的方式进行引入。
新的引入方式如下：

import { Graph } from '@apaas/components/AntvX6';
import { Dnd } from '@apaas/components/AntvX6/plugins';

如需补充导出，到公共模块对应的组件下导出，然后在子模块导入使用

基本栈结构​

栈遵循先入后出逻辑的线性数据结构。

操作​

• push(val): 入栈
• pop(): 出栈
• peek(): 访问栈顶

阅读本篇需要对二叉树及其结构有基本的了解。

概念​

堆一定是一颗完全二叉树, 按排序大小规则主要分为 2 种类型————最大堆和最小堆。

• 最大堆：根节点的值大于等于左右子节点的值。
• 最小堆：根节点的值小于等于左右子节点的值。

总结：最大堆和最小堆的根本区别在于根节点的最值情况。

Heap 类设计​

在堆算法解题中，一般都需要设计一个 Heap 类，用于实现最大堆和最小堆的通用操作。

X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG 图、ER 图等图应用。

本文适用于有一定 antv/x6 使用基础的开发者。

实现效果​

实现效果示意图

业务对象 ER 图用来表示不同领域下不同业务对象之间的关系，如上图所示:

• 一张卡片代表一个节点（业务对象），每个节点下有多个字段。
• 节点间关系，使用带有向箭头的边表示。不同关系会有不同的边颜色对应展示。
• 点击选中某个节点，与该节点所关联的边都会加粗高亮。
• 存在操作按钮，可动态切换每个节点内展示的关联/非关联字段。
• 可通过按钮操作业务对象的增删改查。
• 可拖拽节点，但是不能自建连线。
• 自动布局。

三类空间​

• 命名空间
  声明的分类，不是具体的实体。一个命名空间内可以包含值或类型。对命名空间建立应用需要使用 import 语句，如果使用 const、let 或 var 会使新的实体不再具有命名空间的属性。编译成 JS 代码后会被清除。
• 类型空间
  描述一个值的类型。常见有 type、interface、class、enum 等。编译成 JS 代码后会被清除。
• 值空间
  真实可参与运算的值。常见有变量、对象、数组、class、enum 等。编译成 JS代码后会被保留。

操作符​

• typeof、instanceof：返回更详细的类型
• keyof：返回一个对象的属性名称的字符串数组
• O[K]：返回对象 K 的值
• [K in O]：逐一映射 O 的类型
• extends：泛型、类型别名、函数参数、联合类型的条件类型判断
• infer：定义类型变量
• readonly ：只读
• ?：可选
• -?：去除类型的可选属性
• !: 非空断言
• =: 泛型的默认值
• as: 类型断言
• is: 类型谓词，辅助类型推断

TypeScript 类型体操，让你的 TypeScript 代码更加健壮。题库地址: TypeScript Challenge

基础使用​

import React, { useState, useCallback, useRef } from "react";
import MonacoEditor from "react-monaco-editor";
import * as monaco from "monaco-editor";

const Demo = () => {
  const [value, setValue] = useState("");

  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(); // 编辑器实例
  const monacoRef = useRef<typeof monaco>(); // monaco 实例
  
  // 获取编辑器实例
  const editorDidMountHandle = useCallback(
    (editor: monaco.editor.IStandaloneCodeEditor, monacoIns: typeof monaco) => {
      editorRef.current = editor;
      monacoRef.current = monacoIns;
    },[]);

  return (
    <MonacoEditor
      language="javascript"
      height="100%"
      theme="vs"
      value={value}
      onChange={setValue}
      options={{
        roundedSelection: false,
        cursorStyle: "line",
        wordWrap: "on",
      }}
      editorDidMount={editorDidMountHandle}
    />
  );
};

editorInstance 和 monacoInstance 的区别：

• editorInstance：主要作用于编辑器上操作的方法，例如编辑器写入操作等。
• monacoInstance：主要是编辑器语言相关的内容，例如变量提示、鼠标悬浮提示等。