react基礎語法視圖層&類組件

MVVM

*區別mvc&mvvm

兩者的區別：

數據模型去渲染視圖。數據層改了，vue自己會監聽到幫我們拿最新的數據去渲染視圖；構建數據構建視圖，數據驅動的思想。這一套是非常相似的。

視圖中的內容改變，比如一個input，vue會監測到視圖改變自己把數據改了，不僅實現了數據驅動視圖，視圖也驅動數據，反向地視圖驅動數據，雙向的；

jsx構建視圖

xml：通過自定義標簽存儲數據

通過reactdom

首先是我們的胡子語法

10n -> bigint

除了number&string，其他都渲染成空；

若是數組，會把數組每一項拿出來渲染；

但是也有例外：

1. 函數對象可作為一個組件渲染
2. 行內樣式style必須是一個對象

擴展：駝峰命名法

1. style必須是一個對象
2. class要用className去做

具體應用：判斷&循環

循環

循環元素要加唯一key屬性

引出稀疏數組的問題：

*jsx底層原理

1.createElement生成虛擬dom

虛擬dom: 框架內部自己構建的對象體系。基于對象的這些屬性去描述對應dom節點的相關特征。有哪些標簽節點，dom節點有什么特征特點，有什么屬性，有什么內容……通過自己構建的對象體系已經描述出來了。

babal-presest-react-app編譯成createElement格式

1. 當前元素標簽名
2. 當前元素身上那些屬性，沒有就是null。
3. 第三及以后都是子節點。

React.Fragment -> Symbol(react.fragment)

React.createElement的返回結果就是我們的虛擬dom，即jsx對象。

type標簽名

props既包含了自身屬性，又包含子節點。children若一個子節點就直接為其值，多個就是一個數組。

jsx中不能渲染一個對象？以下3種除外

1. 數組是可以的
2. style必須是一個對象
3. 直接渲染虛擬dom對象

2.虛擬dom -> 真實dom

虛擬dom變為真實dom，通過render方法。

*擴展一下遍歷對象屬性

for in（控制臺中淺色淺紫色代表不可枚舉的）。

我們一般從3個維度去分析遍歷對象屬性的api：公有還是私有，是否可枚舉，是否symbol。我們一般認為，僅私有，全部（不僅僅可枚舉），全部（不僅僅非symbol）是比較好的。

	私有/公有	是否僅可枚舉	是否symbol
for in	公有也會。×	僅。×	僅非symbol。×
Object.keys	僅私有。√	僅。×	僅非symbol。×
Object.getOwnPropertyNames	僅私有。√	全部。√	僅非symbol。×
Object.getOwnPropertySymbol	僅私有。√	全部。√	僅symbol。×
Relect.ownKeys	僅私有。√	全部。√	全部。√

render方法實現

函數組件渲染底層原理

工程化就是在組件化的基礎上合并、壓縮、打包

函數組件的概念：

函數組件：創建一個函數，返回jsx視圖。

編譯流程基本一致，主要的區別就是type是一個函數。

子節點 -》props.childeren。雙閉合調用的時候會產生

props屬性

只讀的。

對象的規則有三個：

作用：父傳子，通過props

插槽處理機制

插槽傳遞的是視圖，html標簽dom結構，

React上有很多方法，use是hooks函數，

React.children，內部實現了轉換成了array。

具名插槽實現

組件封裝

靜態組件&動態組件

類組件

*js繼承

call繼承 + 原型繼承

剛總結了，讓A繼承于B，就是讓A.prototype的__proto__屬性值為B.prototype。

function A(){
    B.call(this) // 繼承B的私有this.name = 'angela'
    this.age = 18
}
A.prototype.sum =function(a,b){return a+b;}function B(){
    this.sex='female'
}
B.prototype.sus=function(a,b){ return a-b; }
console.dir(B)
Object.setPrototypeOf(A.prototype, B.prototype) // 繼承B的公有
console.dir(A)const a = new A
console.log(a)

js設計模式

面向對象（OOP）

面向對象中的繼承

類組件

*es6 class語法

*類組件繼承原理

1. 繼承了私有屬性 props context refs updater
2. 繼承了公有屬性 isReactComponent setState forceUpdate
3. super內部實現就是call繼承

class A{
    num = 100getNum=()=>{
        console.log(this.num)}sum = function(x,y){
        console.log(this.num)}add(){}
}
const a = new A
a.getNum()
a.sum()
console.log(a)

類組件第一次渲染底層邏輯

類組件和函數組件的區別：

會把此當做構造函數執行，創建一個實例，然后執行render

整體流程：

1. 掛載props

1. 初始化狀態：狀態就是state。setState & forceUpdate。

之后擴展state

setState是異步的，即時打印值沒有變。

forceUpdate

1. 執行周期函數

1. render
2. componentDidMount

騰訊文檔-流程圖插件

類組件更新的底層邏輯

組件更新整體流程

騰訊文檔-流程圖插件

• forceUpdate會跳過shoudUpdate

第二種組件更新的情況：父組件更新也會觸發子組件的更新

什么情況能讓組件更新？

1. 修改狀態能讓組件更新
2. 父組件更新

父組件自上而下渲染的時候，一定會遇到子組件，先深度遞歸。

騰訊文檔-流程圖插件

周期函數的命名特點：

基本component開頭，將要都是will，已完成都是did，

更新是update，掛載是mount，卸載是unmount

PureComponent和Component的區別

React.PureComponent

淺比較概念：對象至多比較一級

淺比較源碼比較