React學習筆記

你以爲你用的react框架有什麼特色呢？

1)使用jsx語法，能夠在js中寫html。
2)單向數據流：數據一旦更新，會渲染整個app。
react的渲染方式：
用戶輸入
從API獲取數據
將數據傳給頂層組件
React將每一個組件渲染出來
因爲是單向數據流，因此不會有雙向數據綁定、數據模型的髒檢查、確切的DOM操做。

react組件

能夠接受參數、可複用、能夠傳遞、返回結果(渲染組件)

react高階組件

高階組件就是實現組件的複用，接收一個組件返回一個新的組件。

虛擬DOM樹

javascript雖然快，可是操做DOM卻很是慢。

react的生命週期

安裝：建立組件的實例將其插入DOM時，將按如下順序調用這些方法：
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
更新：props or state的更改可能致使更新。從新呈現組件時，將按如下順序調用這些方法：
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
卸載：從DOM中刪除組件時調用此方法。
componentWillUnmount()

setState是異步的仍是同步的
異步

setState是如何實現的？
調用setState更新this.state不是立刻生效的，是異步。
而後以後會發生什麼？
會執行更新階段的life circle hooks，調用render函數的過程當中會執行diff算法。
Vdom
爲何須要vdom?
虛擬dom就是結構樹和 dom 的結構同樣的對象。
用虛擬dom配合diff算法找出須要更新的部分，避免額外更新dom的開銷。
Diff算法的原理