https://www.tslang.cn/docs/handbook/jsx.html

react map

我按照课程实现了组件，关于本次课的【笔记】+【源码】都在这里了，有需要的同学可以看看！

https://github.com/Elylicery/Front-end-Demo/tree/master/%5Breact%2Bts%5D%E5%BC%80%E5%8F%91antd%E7%BB%84%E4%BB%B6

findDOMNode()的使用：

1 代码示例：

let app：any

ReactDOM.render(

<App ref={node=>app=node} />,

document.getElementById('root'),()=>{

    console.log(ReactDOM.findDOMNode(app));

});

 ts+react 创建项目：create-react-app testApp --typescript --use-npm

启动 npm start

jsx配置

moduleResolution：有两种选择 node 即 import 在node_modes 进行查找，而classic 则在同级目录开始查找，找不到再到node_modes 查找，找不到还往父级目录去查找，主要为了兼容老项目

Fiber vs Stack

render

create react app

https://create-react-app.dev/

https://reactjs.org/docs/create-a-new-react-app.html

https://github.com/facebook/create-react-app

create-react-app app --typescript --use-npm

https://create-react-app.dev/docs/getting-started#selecting-a-template

npx create-react-app app --template typescript

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？