這篇文章給大家分享的是有關(guān)react的組件性能優(yōu)化方法有哪些的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站是專業(yè)的內(nèi)丘網(wǎng)站建設(shè)公司,內(nèi)丘接單;提供網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行內(nèi)丘網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
react的組件性能優(yōu)化有:1、盡量多使用無狀態(tài)函數(shù)構(gòu)建組件;2、拆分組件為子組件,對組件做更細粒度的控制;3、運用PureRender,對變更做出最少的渲染;4、運用immutable。
react的組件性能優(yōu)化有:
1. 盡量多使用無狀態(tài)函數(shù)構(gòu)建組件
無狀態(tài)組件只有props和context兩個參數(shù)。它不存在state,沒有生命周期方法,組件本身即有狀態(tài)組件構(gòu)建方法中的render方法。
在合適的情況下,都應(yīng)該必須使用無狀態(tài)組件。無狀態(tài)組件不會像React.createClass和ES6 class會在調(diào)用時創(chuàng)建新實例,它創(chuàng)建時始終保持了一個實例,避免了不必要的檢查和內(nèi)存分配,做到了內(nèi)部優(yōu)化。
2. 拆分組件為子組件,對組件做更細粒度的控制
相關(guān)重要概念: 純函數(shù)
純函數(shù)的三大構(gòu)成原則:
給定相同的輸入,它總是返回相同的輸出: 比如反例有 Math.random(), New Date()
過程沒有副作用:即不能改變外部狀態(tài)
沒有額外的狀態(tài)依賴:即方法內(nèi)部的狀態(tài)都只能在方法的生命周期內(nèi)存活,這意味著不能在方法內(nèi)使用共享的變量。
純函數(shù)非常方便進行方法級別的測試及重構(gòu),它可以讓程序具有良好的擴展性及適應(yīng)性。純函數(shù)是函數(shù)式變成的基礎(chǔ)。
React組件本身就是純函數(shù),即傳入指定props得到一定的Virtual DOM,整個過程都是可預(yù)測的。
具體辦法
拆分組件為子組件,對組件做更細粒度的控制。保持純凈狀態(tài),可以讓方法或組件更加專注(focus),體積更小(small),更獨立(independent),更具有復(fù)用性(reusability)和可測試性(testability)。
3. 運用PureRender,對變更做出最少的渲染
相關(guān)重要概念: PureRender
PureRender的Pure即是指滿足純函數(shù)的條件,即組件被相同的props和state渲染會得到相同的結(jié)果。
在React中實現(xiàn)PureRender需要重新實現(xiàn)shouldComponentUpdate生命周期方法。shouldComponentUpdate是一個特別的方法,它接收需要更新的props和state,其本質(zhì)是用來進行正確的組件渲染。當(dāng)其返回false的時候,不再向下執(zhí)行生命周期方法;當(dāng)其返回true時,繼續(xù)向下執(zhí)行。
組件在初始化過程中會渲染一個樹狀結(jié)構(gòu),當(dāng)父節(jié)點props改變的時候,在理想情況下只需渲染一條鏈路上有關(guān)props改變的節(jié)點即可;但是,在默認情況下shouldComponentUpdate方法返回true,React會重新渲染所有的節(jié)點。
有一些官方插件實現(xiàn)了對shouldComponentUpdate
的重寫,然后自己也可以做一些代碼的優(yōu)化來運用PureRender。
具體辦法
(1) 運用PureRender
使用官方插件react-addons-pure-render-mixin實現(xiàn)對shouldComponentUpdate
的重寫
import React from 'react'; import PureRenderMixin from 'react-addons-pure-render-mixin'; class App extends React.Component { constructor(props) { super(props); this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); } render() { return <div className={this.props.className}>foo</div> } }
它的原理是對object(包括props和state)做淺比較,即引用比較,非值比較。比如只用關(guān)注props中每一個是否全等(如果是prop是一個對象那就是只比較了地址,地址一樣就算是一樣了),而不用深入比較。
(2)優(yōu)化PureRender
避免無論如何都會觸發(fā)shouldComponentUpdate
返回true的代碼寫法。
避免直接為prop設(shè)置字面量的數(shù)組和對象
就算每次傳入的數(shù)組或?qū)ο蟮闹禌]有變,但它們的地址也發(fā)生了變化。
如以下寫法每次渲染時style都是新對象都會觸發(fā)shouldComponentUpdate為true:
<Account style={{color: 'black'}} />
改進辦法:將字面量設(shè)置為一個引用:
const defaultStyle = {}; <Account style={this.props.style || defaultStyle} />
避免每次都綁定事件
如果這樣綁定事件的話每次都要生成一個新的onChange
屬性的值:
render() { return <input onChange={this.handleChange.bind(this)} /> }
應(yīng)該盡量在構(gòu)造函數(shù)內(nèi)進行綁定,如果綁定需要傳參那么應(yīng)該考慮抽象子組件或改變現(xiàn)有數(shù)據(jù)結(jié)構(gòu):
constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange() { ... } render() { return <input onChange={this.handleChange} /> }
在設(shè)置子組件的時候要在父組件級別重寫shouldComponentUpdate
4.運用immutable
JavaScript中對象一般是可變的,因為使用引用賦值,新的對象的改變將影響原始對象。為了解決這個問題是使用深拷貝或者淺拷貝,但這樣做又造成了CPU和內(nèi)存的浪費。
Immutable data
很好地解決了這個問題。
Immutable data就是一旦創(chuàng)建,就不能再更改的數(shù)據(jù)。對Immutable對象進行修改、添加或刪除操作,都會返回一個新的Immutable對象。Immutable實現(xiàn)的原理是持久化的數(shù)據(jù)結(jié)構(gòu)。即使用舊數(shù)據(jù)創(chuàng)建新數(shù)據(jù)時,保證新舊數(shù)據(jù)同時可用且不變。同時為了避免深拷貝帶來的性能損耗,Immutable使用了結(jié)構(gòu)共享(structural sharing),即如果對象樹中一個節(jié)點發(fā)生變化,只修改這個節(jié)點和受它影響的父節(jié)點,其他節(jié)點則進行共享。
感謝各位的閱讀!關(guān)于react的組件性能優(yōu)化方法有哪些就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)站題目:react的組件性能優(yōu)化方法有哪些
分享網(wǎng)址:http://muchs.cn/article34/pdpsse.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、、微信公眾號、域名注冊、搜索引擎優(yōu)化、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)