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

react map

我按照課程實現(xiàn)了組件，關(guān)于本次課的【筆記】+【源碼】都在這里了，有需要的同學可以看看！

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 創(chuàng)建項目：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 設(shè)計模式

//?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(被掛載的組件，掛載的節(jié)點，?回調(diào)函數(shù))

render(<App?/>?,document.getElementById(root),?()?=>?{
????//?回調(diào)方法
????setTimeout(()?=>?{
????????//?卸載組件//?走的是生命周期函數(shù)?componentWillUmmount(){}
????????????ReactDOM.unmountComponentAtNode(document.getElementById('root')?as?HTMLElement);
????????//?原生方法
????????//?((document.getElementById('root')?as?HTMLElement).firstChild?as?HTMLElement).remove();
????},?2000);
)

componentWillUnmount()?{console.log('生命周期函數(shù)-----組件準備卸載.....');}

react?渲染機制有2種：
v16?之前用的是?stack，?更新比較慢，遇到大量更新的時候頁面會卡頓。
v16?之后用的是?Fiber，?分層對比更新，16ms?之內(nèi)更新完成，更新效率高

react-dom:
????render()方法：
???????作用：?執(zhí)行render方法?渲染頁面，?接收3個參數(shù)，渲染的組件，
???????當前渲染的組件掛載的節(jié)點，第三個參數(shù)是一個回調(diào)函數(shù)，渲染完成之后做的事情，
???????所以render?方法是一個異步方法。

HaiYaaa!

ModuleResolution："node" or "classic"

node模式會直接到node_modules查找module，而classic會優(yōu)先在src目錄下查找相應的module？