react 原理的簡單分析

元件生命週期：元件從建立到掛載到頁面執行、完成複雜的元件功能、分析元件錯誤原因等。

鉤子函式的作用：為開發人員在不同的階段操作元件提供了時機。

鉤子函式：

階段順序

鉤子函式

說明建立階段

1constructor

初始化 props and state

建立階段

2componentwillmount（不安全）

元件將要掛載掛載3

render

渲染ui（不能使用setstate方法）掛載4

componentdidmount

元件掛載完成更新5

shouldcomponentupdate

詢問元件是否需要更新更新6

componentwillupdate（不安全）

元件將要更新更新7

componentdidupdate

元件更新完畢挾雜8

componentwillunmount

元件從頁面消失，執行清理工作（比如清理定時器等）

-getsnapshotbeforeupdate（新版）

在子元件更新dom和refs之前，從dom中捕獲一些資訊（例如滾動位置）

-getderivedstatefromprops（新版）

-componentwillreceiveprops（不安全）

可以在子元件的render函式執行前獲取新的props

import react,  from 'react'
export default class lifecycle extends component 
static defaultprops = 
constructor(props) ;//初始化預設的狀態物件
console.log('1. constructor 初始化 props and state');
}//componentwillmount在渲染過程中可能會執行多次
componentwillmount() 
//componentdidmount在渲染過程中永遠只有執行一次
//一般是在componentdidmount執行***，進行非同步操作
componentdidmount() );
});}
shouldcomponentupdate(nextprops, nextstate) 
componentwillupdate(nextprops, nextstate) 
componentdidupdate(prevprops, prevstate) 
add = () => );
};render() :
+                )}
}class subcounter extends component ;
}componentwillunmount() 
//呼叫此方法的時候會把新的屬性物件和新的狀態物件傳過來
shouldcomponentupdate(nextprops, nextstate)  else 
}//componentwillreceiveprop 元件收到新的屬性物件
componentwillreceiveprops() 
render() )}
}

getsnapshotbeforeupdate: ** 接收父元件傳遞過來的props和元件之前的狀態，此生命週期鉤子必須有返回值，返回值將作為第三個引數傳遞給componentdidupdate。必須和componentdidupdate一起使用，否則會報錯

該生命週期鉤子觸發的時機：被調用於render之後、更新dom和refs之前

版本遷移：

componentwillmount，componentwillreceiveprops，componentwillupdate這三個生命週期因為經常會被誤解和濫用，所以被稱為不安全（不是指安全性，而是表示使用這些生命週期的**，有可能在未來的 react 版本中存在缺陷，可能會影響未來的非同步渲染）的生命週期。

react 16.3 版本：為不安全的生命週期引入別名unsafe_componentwillmount，unsafe_componentwillreceiveprops和unsafe_componentwillupdate。（舊的生命週期名稱和新的別名都可以在此版本中使用）

react 16.3 之後的版本：為componentwillmount，componentwillreceiveprops和componentwillupdate啟用棄用警告。（舊的生命週期名稱和新的別名都可以在此版本中使用，但舊名稱會記錄dev模式警告）

react 17.0 版本：推出新的渲染方式——非同步渲染（ async rendering），提出一種可被打斷的生命週期，而可以被打斷的階段正是實際dom掛載之前的虛擬dom構建階段，也就是要被去掉的三個生命週期componentwillmount，componentwillreceiveprops和componentwillupdate。（從這個版本開始，只有新的「unsafe_」生命週期名稱將起作用）

減輕state：

避免不必要的重新渲染：

純元件：

純元件內部對比是：shadllow compare（淺層對比）

對於值型別：比較兩個值是否相同（直接賦值即可沒有坑）

setstate 的作用：1. 修改 state 2.更新元件ui

父元件重新渲染時，也會重新渲染子元件，但只會渲染當前元件子樹（當前元件及其所有子元件會被更新）

setstate 的執行是非同步的，如果在呼叫了setstate 方法後立即列印 state ，state 還是原來未更新時的狀態。

state = 
this.setstate()
console.log('列印', this.state.num) // 此時列印的結果並沒有 + 1 ，還是原來的值

如果在乙個函式裡面重複呼叫多次 setstate，setstate等同於執行了一次。

state = this.setstate() console.log('列印', this.state.num) this.setstate() // 最終 num 並沒有並更新2次變為3，而是被更新為2

// 這是由於 num 在第一次setstate的非同步更新之後下面的**拿到值是原來的1，因此再次執行 setstate等同於在1的基礎上+4，最終 num = 5 。

如果想要在函式中多次呼叫setstate，需要用**函式的方法獲取上一次state的最新值再更新。

在setstate中獲取上一次state 的最新值可以用**函式 this.setstte( (state, props) => {} )

**如下：

state = 
this.setstate()
this.setstate((state, props) => 
})// 此時的 num = 6

在setstate中有兩個**函式 this.setstate(, callback )，第二個**函式會在第乙個**函式執行完更新後執行，因此在第二個**函式中也可以拿到state被更新後的最新值。

state = 
this.setstate(, () => )

react更新檢視的思想是：state發生變化會重新渲染檢視。

元件中只有乙個dom元素需要更新時，並不會重新渲染整個元件的內容，只會更新部分變化的地方。而部分更新是靠虛擬dom和diff演算法來實現的。

虛擬dom本質上是乙個js物件，用來描述你希望在螢幕上看到的內容（ui）。

虛擬dom物件：

const element = 
}

虛擬dom執行過程：

初次渲染時，react會根據初始state（model）建立乙個虛擬dom物件（樹）。

根據虛擬dom生成真正dom渲染到頁面中。

當資料發生變化後（setstate（）），重新根據新的資料，建立新的虛擬dom物件（樹）

與上一次得到的虛擬dom物件，使得diff演算法對比（找不同），得到需要更新的內容。

最終，react只將變化的內容更新（patch）到dom中，重新渲染到頁面。

總結：虛擬dom和diff演算法的確帶來了效能提公升，但它的真正價值從來都不是效能。最大的價值是讓react脫離了瀏覽器環境的束縛，也為跨平台提供了支援。

react 原理的簡單分析

jquery原理的簡單分析

CAT 原理簡單分析

Shiro簡單授權原理分析

react 原理的簡單分析

jquery原理的簡單分析

CAT 原理簡單分析

Shiro簡單授權原理分析

相關推薦