## 前言 本文摘錄一些常見的誤解。 ## react是一個完整的前端框架 其實并不完整，其僅僅是包括了前端的頁面，可以搭配jsx與虛擬dom完成視圖層的操作，但是還缺乏數據的控制與邏輯部分，如果這部分也寫在react中就會讓組件顯得臃腫，因此正確的觀點是react搭配flux以及其他生態工具才能構成完整的前端框架。 ## jsx是頁面模板 jsx表面看起來是html的模板，實際上卻可以寫js的邏輯，書寫jsx實際上是在構建js的抽象語法樹（AST）,其中每一個標簽對應著一個js的表達式，而不是和其他模板一樣，對應的是填充之后的html代碼。 另一方面，它的轉換不是簡單的文本替換，而是AST轉換。 所以每一處被嵌入的js邏輯代碼必須是一個AST的獨立節點。 ## react的性能 性能優化的本質原因：傳統的dom更新是重新渲染的比較浪費時間，而虛擬dom是對比dom變化的部分，只對變化部分進行更新。這個是相對整體渲染而言的。 但有些時候，如果能夠直接指定變更的部分，其比虛擬dom對比然后去更新代價要低。這里不排除，有些經過計算是比手動調整更優化的情況。所以虛擬dom不一定是所有場景下性能最優的。以可接受的執行效率損失作為代價，換取開發效率的提升，是一個趨勢。 ## 短路式的性能優化 基于shouldComponentUpdate做的短路優化更新幾乎是被無限制的或者默認的使用的。其基本做法是觸發更新之前，對比其數據變更部分，認為props和state未變更的情況下，返回false，阻止其渲染。在很多情況下這種方式可以大大的提升性能，優化用戶體驗，但是有兩個基本的前提： 1 組件本身的render方法參數是state和props的純函數，對未改變的state和props,render返回相同的結果。 2 state和props是不可變的。關于第二點，其參數復雜的時候不會進行深層的匹配判斷，其內容的變化不會被檢查出來。如果這種情況數據發生變化了，但界面未進行更新，就會導致不匹配的錯誤。 **注意事項：** 盡管其看似是哪里都合適的，但是如果其判斷機制浪費了很多邏輯，進行了多層對象遍歷的開銷。這樣的優化不是很必要，尤其對于頻繁更改的組件，其累計損失不可忽視，需要謹慎考慮。 **提示：默認給所有組件加上這個優化是不推薦的做法** ## 無狀態函數式組件的性能