1.jsx其實(shí)是createElement的語法糖,編譯成js后進(jìn)行了優(yōu)化,所以react使用jsx其實(shí)也是進(jìn)行了性能優(yōu)化
2.setState異步也是為了性能優(yōu)化,收集一段時(shí)間內(nèi)多次修改合并更新
3.列表渲染加key以優(yōu)化diff算法同層同位置比較的不足
4.父組件更新state的時(shí)候父子組件都會(huì)重新渲染,類組件通過繼承PureComponent以達(dá)到父組件修改state子組件不更新的效果,函數(shù)式組件通過memo高階函數(shù)包裹也是同理
5.編寫jsx的時(shí)候最外層只能有一個(gè)元素,這個(gè)時(shí)候用div就會(huì)造成無用的節(jié)點(diǎn)太多,這個(gè)時(shí)候可以使用fragement,它不會(huì)渲染
6.在constuctor中用bind綁定函數(shù),如果在render中綁定那么每次組件渲染就會(huì)重新生成新函數(shù)綁定,肯定沒有使用已有的效率高
7.使用react.lazy和Suspense懶加載組件
8.useEffect的第二個(gè)參數(shù)就是為了當(dāng)該參數(shù)沒有變化的時(shí)候跳過該Effct以達(dá)到性能優(yōu)化的效果
react中的性能優(yōu)化
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 由于render會(huì)多次執(zhí)行,所以在render函數(shù)里創(chuàng)建新東西是一件很不劃算的事情。其中就包括綁定事件。 bind...
- 1. 在constructor中綁定事件函數(shù)的this指向 把一個(gè)函數(shù)賦值給一個(gè)變量,然后用那個(gè)變量去執(zhí)行函數(shù)會(huì)造...
- react 性能優(yōu)化 React 組件性能優(yōu)化的核心就是減少渲染真實(shí)DOM節(jié)點(diǎn)的頻率,減少Virtual DOM ...
- React 組件性能優(yōu)化最佳實(shí)踐 React 組件性能優(yōu)化的核心是減少渲染真實(shí) DOM 節(jié)點(diǎn)的頻率,減少 Virt...
- React性能優(yōu)化方法總結(jié) 使用React開發(fā)的項(xiàng)目,可以從加載性能和運(yùn)行時(shí)性能兩個(gè)方面進(jìn)行優(yōu)化。 加載性能優(yōu)化的...