1.組件化

在 MV* 架構出現之前，組件主要分為兩種：

• 狹義上的組件，又稱為 UI 組件，比如 Tabs 組件、Dropdown 組件。組件主要圍繞在交互 動作上的抽象，針對這些交互動作，利用 JavaScript 操作 DOM 結構或 style 樣式來控制。
• 廣義上的組件，即帶有業務含義和數據的 UI 組件組合。這類組件不僅有交互動作，更重 要的是有數據與界面之間的交互。

就像React官網上的描述一樣：“每個組件都是獨立包裝好的，這樣也就方便你像搭積木一樣組合各種組件來構建復雜的UI界面。”

2.虛擬DOM

為了減少消耗性能的DOM操作，React 把真實 DOM 樹轉換成js對象樹，也就是 Virtual DOM。每次數據更新後，重新計算 Virtual DOM，並和上一次生成的 Virtual DOM 做Diff計算對比，對發生 變化的部分做批量更新。

3.props和setState

state 與 props 是 React 組件中最重要的概念。如果頂層組件初始化 props，那麽 React 會向下 遍歷整棵組件樹，重新嘗試渲染所有相關的子組件。而 state 只關心每個組件自己內部的狀態， 這些狀態只能在組件內改變。把組件看成一個函數，那麽它接受了 props 作為參數，內部由 state 作為函數的內部參數，返回一個 Virtual DOM 的實現。

4.Diff算法

Tree Diff：只會對相同層級的 DOM 節點進行比較，即同一個父節點下的所有子節點。

Component Diff：如果是同一類型的組件，按照原策略繼續比較 Virtual DOM 樹即可。如果不是，則將該組件判斷為 dirty component，從而替換整個組件下的所有子節點。

Element Diff：當節點處於同一層級時，diff 提供了 3 種節點操作，分別為插入/移動/刪除。

5.生命周期

• 當首次掛載組件時，按順序執行 getDefaultProps、getInitialState、componentWillMount、 render 和 componentDidMount。
• 當卸載組件時，執行 componentWillUnmount。
• 當重新掛載組件時，此時按順序執行 getInitialState、componentWillMount、render 和componentDidMount，但並不執行 getDefaultProps。
• 當再次渲染組件時，組件接受到更新狀態，此時按順序執行 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

*以上內容參考自書目《深入React技術棧》作者 陳屹，建議閱讀。

初步理解React