Taro 2​

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

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

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

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

Taro 3​

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

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

类型​

原始类型​

• 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>。

概述​

动态规划（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：主要是编辑器语言相关的内容，例如变量提示、鼠标悬浮提示等。