https://reactjs.org/docs/react-dom.html

https://reactjs.org/docs/rendering-elements.html

https://reactjs.org/docs/dom-elements.html

React 设计模式

// 4. 泛型 class 一
class addGenericsClass {
  // Property 'add' has no initializer and is not definitely assigned in the constructor.ts(2564)
  add: <T>(arg1: T, arg2: T) => T;
}

let addInstance = new addGenericsClass();
addInstance.add = add;

addInstance.add<number>(1, 2);
addInstance.add<string>(`1`, `2`);
// 或
// addInstance.add(1, 2);
// addInstance.add(`1`, `2`);

// 4. 泛型 class 二
class addGenericsClass2<T> {
  // Property 'add' has no initializer and is not definitely assigned in the constructor.ts(2564)
  add: (arg1: T, arg2: T) => T;
}

// A 'new' expression with type arguments must always be followed by a parenthesized argument list.ts(1384)
// let addInstanceNumber = new addGenericsClass2<number>;
// addInstanceNumber.add = add;
// let addInstanceString = new addGenericsClass2<string>;
// addInstanceString.add = add;

let addInstanceNumber = new addGenericsClass2<number> ();
addInstanceNumber.add = add;

let addInstanceString = new addGenericsClass2<string> ();
addInstanceString.add = add;

addInstanceNumber.add(1, 2);
addInstanceString.add(`1`, `2`);

# bug

```js

class addGenericsClass {

// Property 'add' has no initializer and is not definitely assigned in the constructor.ts

add: <T>(arg1: T, arg2: T) => T;

}

```

keyof typeof ???

T extends interface

??? implements 

class implements interface

class extends class

泛型类

class <T>

推荐写法

泛型类

class <T>

class {

 add: <T>

}

// 3. 泛型对象接口 一
interface addGenericsInterface {
  <T>(arg1: T, arg2: T): T,
}

let addGenerics: addGenericsInterface = add;
// let addGenerics: addGenericsInterface;
// addGenerics = add;

addGenerics<number>(1, 2);
addGenerics<string>(`1`, `2`);
// 或
// addGenerics(1, 2);
// addGenerics(`1`, `2`);

// 3. 泛型对象接口 二
interface addGenericsInterface2<T> {
  (arg1: T, arg2: T): T,
}

let addGenericsNumber: addGenericsInterface2<number> = add;
let addGenericsString: addGenericsInterface2<string> = add;

addGenericsNumber(1, 2);
addGenericsString(`1`, `2`);

javascript中默认包含了null 和 undefined 类型(?)

(意思可能是 把这两个赋值给其他类型都是不报错的 又想了想 这不是废话吗 javascript本来就没有类型检测 任何值都可以赋给其他变量.)

Number(null)            -> 0

Number(undefined) -> NaN

react-dom 之 render 方法
render(被挂载的组件，挂载的节点， 回调函数)

render(<App /> ,document.getElementById(root), () => {
    // 回调方法
    setTimeout(() => {
        // 卸载组件// 走的是生命周期函数 componentWillUmmount(){}
            ReactDOM.unmountComponentAtNode(document.getElementById('root') as HTMLElement);
        // 原生方法
        // ((document.getElementById('root') as HTMLElement).firstChild as HTMLElement).remove();
    }, 2000);
)

componentWillUnmount() {console.log('生命周期函数-----组件准备卸载.....');}

react 渲染机制有2种：
v16 之前用的是 stack， 更新比较慢，遇到大量更新的时候页面会卡顿。
v16 之后用的是 Fiber， 分层对比更新，16ms 之内更新完成，更新效率高

react-dom:
    render()方法：
       作用： 执行render方法 渲染页面， 接收3个参数，渲染的组件，
       当前渲染的组件挂载的节点，第三个参数是一个回调函数，渲染完成之后做的事情，
       所以render 方法是一个异步方法。

HaiYaaa!

ModuleResolution："node" or "classic"

node模式会直接到node_modules查找module，而classic会优先在src目录下查找相应的module？

未理解透彻

14行是 keyof  

20行为什么是 keyof typeof

keyof作用: 

let keys of typeof people

<T, K extends keyof T>

K的类型是T属性的某一个key

课程内容收获

react

let u: undefined = undefined

let n: null = null

        //区别

        Number(null) //0

react与Ant结合

用到的插件  classNames 、rmc-deefback 、m-dialog

ReactDOM.createPortal  方法允许子组件挂载到外层容器中，还能有事件冒泡的功能

reactDom findDomNode 方法返回的是Dom节点（HTML元素）首先需要利用ref获得节点对象

render()的渲染机制 stack 老得渲染机制

fiber 新的渲染机制  分层比对更新（16ms内比对完）

泛型约束

定义一个interface，然后让泛型继承

interface ILength {

    Length: number

}

function getLength <T extends ILength >(arg: T): T{

    return arg.length;

}

例子2 两个类型约束

function getProperty<T, K extends keyof T>(obj:T,key:K){

    return obj[key];

}

keyof 表示取出对象中的所有的属性

ts 泛型类

class Adder {

    add: <T>(arg1:T,arg2:T) => T

}

const adder = new Adder()

adder.add = funcction add<T>(arg1:T,arg2:T){

    return arg1 + arg2;

}

可以改写为

class Adder<T> {

    add: (arg1:T,arg2:T) => T

}

const adder = new Adder<number>()

adder.add = funcction add(arg1,arg2){

    return arg1 + arg2;

}

泛型类型写法：

1、<T>(arg1:T,arg2:T) => T

2、{<T>(arg1:T,arg2:T) : T}

let addFuc:<T>(arg1:T,arg2:T) => T

简化泛型类型，方便引用使用interface

interface GenAdder {<T>(arg1:T,arg2:T) : T}

let addFuc:GenAdder

调用函数

addFunc<number>(1,2);

interface GenAdder<T> {(arg1:T,arg2:T) : T}

let addFuc:GenAdder<number>

调用函数

addFunc<(1,2);

原始函数

function add(arg1:number,arg2:number):number{

    return rag1+rag2

}

ts 泛型

function add<T>(arg1:T, arg2:T):T{

    return arg1 + arg2

}

函数调用

add<number>(1,2);

add<string>('aa','bb');

ts target配置 经过typescript的编译后生成什么版本的js代码，通常设置橙es5

ts noImplicitAny 设置为true时表示不允许出现隐式any类型。

    设置为false时表示允许出现隐式any类型。

解决变量隐式类型的方法式在变量定义的时候就给变量赋值。代码如下：

const key = "name"

const student = {

[key] : 'zhangsan'

}

ts 配置esModleInterRop  值设置为true的时候，当导出不含default是会自动加上default。使用场景module.exports={},设置为true时 相当于modele.exports.default = {}

ts jsx配置

三个值：preserve | reacr-native | react

preserve 输出文件扩展名.jsx

ts moduleresolution 配置项有两个值node和classic，两个值的区别主要是查找路径不同  配置是node时，默认是去node_modules文件下查找引用文件 配置是classic时，现在外层查找引用文件，找不到时去node_modules目录下查找（主要是兼容老项目）。两个配置如果都找不到会去上层目录查找，直到根目录

#### 动画1秒60帧

人眼中，如果1秒内有60帧，那么动画看起来流畅，否则就卡顿。这样算起来，一帧就是12毫秒。

#### Stack - 16版本之前的渲染模式

主要特点，等等整个虚拟树完成了比较后，再统一渲染，如果渲染节点巨大，虚拟树比较的工作可能会超过12毫秒，此时会出现卡顿现象。

#### Fiber - 16版本的渲染模式

主要特点，将整个虚拟数的比对拆分成很多个小任务，每个小任务的完成时间控制在一帧12毫秒内，每个小任务完成后都会完成一次渲染（小任务对应的局部渲染）。

因为每次渲染都控制在一帧以内，不用等所有任务或整个树比对完后才渲染，所有看起来流畅，不卡顿。

### 两种使用范型接口的方式

#### 函数调用时声明T类型

```ts

// interface GenAdder {<T>(arg1:T,arg2:T):T};

// let addFunc : GenAdder;

// addFunc = add;

// // 函数调用时定义好T类型

// addFunc<number>(1,2)

```

#### 在ts类型声明时设置好T类型

我们也可以将上面的T从花括号后，提取出来，放在GenAdder后；

**这种定义方式，就要求在使用接口时，必须在接口后定义好`<类型>`**，

可以理解为，不同的范型接口定义方式，决定了使用范型时的方式与规范。

也可以理解为，定义接口时，若接口后紧挨着一个`<T>`，则使用此接口时，必须是 `接口名<T>`；

若接口后是干干净净的，没有任何其他东西，则使用此接口时，应该为单纯的 `接口名`

```ts

// 将T提出来，紧挨接口名之后

// interface GenAdder<T> {(arg1:T,arg2:T):T};

//使用接口时，需定义好T类型

// let addFunc : GenAdder<number>;

// addFunc = add;

// addFunc(1,2)

```

#### 范型接口定义方式不同，使用方式将不同

参考上面《在ts类型声明时设置好T类型》

轻微轻微轻微轻微轻微

1. module.exports  这是commonJs导出规范；用require()引入模块

2. export default 是 import 规范；

3. tsconfig中 esModuleInterop 的作用是兼容模块的导入导出

1. 初始化一个typescriptp的配置文件： tsc --init;

2. 两个空类型

   let u: undefined = undefined

   let n: null = null

        //区别

        Number(null) //0

        Number(undefined) // NaN

        console.log(undefined == null) //true

3.类型检测

let height: number

height = 100 //success

height = '100' //fail

height = null //success

height = undefined //success

这是因为其他类型都包含null和undefined类型