成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

大幅提升 React 性能的6個建議

Yu_Huang / 3180人閱讀

摘要：在不做任何優(yōu)化的情況下性能也非常好，然而通過一些小小的優(yōu)化，可以讓性能進(jìn)一步提升，通過以下這條建議，可以數(shù)十倍加快渲染速度設(shè)置為在開發(fā)環(huán)境下，有完整的警告和錯誤檢查，但它們不是為生產(chǎn)環(huán)境準(zhǔn)備的，如果你看過的源碼，你會看到很多，這些代碼對于最

React 在不做任何優(yōu)化的情況下性能也非常好，然而通過一些小小的優(yōu)化，可以讓性能進(jìn)一步提升，通過以下這6條建議，可以數(shù)十倍加快渲染速度

設(shè)置 NODE_ENV 為 Production

React 在開發(fā)環(huán)境下，有完整的警告和錯誤檢查，但它們不是為生產(chǎn)環(huán)境準(zhǔn)備的，如果你看過 React 的源碼，你會看到很多 if (process.env.NODE_ENV != "production")，這些代碼對于最終用戶是不需要的，而且訪問 process.env.NODE_ENV 會非常慢，對于生產(chǎn)環(huán)境而言，完全可以移除這些代碼

如果你使用 Webpack，你可以使用 DefinePlugin 來替換 process.env.NODE_ENV 為 "production"，然后使用 UglifyJsPlugin 移除這些不會執(zhí)行的代碼

// webpack.config.js
...
plugins: [
    new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("production")
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]
...
React 15 的渲染速度比 0.14 快約 25%

在 React 15 的更新中非常重要的一項是，使用在現(xiàn)代化瀏覽器中性能更好的 document.createElement 替換 innerHTML，這一改動也意味著 React 將不再支持 IE8

Babel Constant 和 Inline Elements 轉(zhuǎn)換

Babel 為開發(fā)者們提供了 React Constant Elements 和 React Inline Elements，這兩款插件能夠在編譯階段將代碼轉(zhuǎn)換成更高效的形式，注意僅將它們用于生產(chǎn)環(huán)境

封裝集合渲染為獨(dú)立組件

這一點在循環(huán)渲染集合組件時尤其重要，React 在渲染大型集合是性能十分糟糕，原因是 React 會在每次更新中全部重新渲染，因此建議將渲染集合的部分裝為獨(dú)立的組件渲染

// Bad
class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (

            {user.name}
            
    
                {todos.map(todo => )}
            

        
)
    }
}
// Good
// 當(dāng) user.name 更新時，列表不會重新渲染
class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (

            {user.name}
            
        
)
    }
}

class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return (
    
            {todos.map(todo => )}
        
)
    }
}
盡早綁定方法

在 render() 中綁定的方法應(yīng)該盡早聲明，而不是在渲染時定義

// Bad
render() {
    return  { alert(this.state.text) }} />
}
// Good
constructor() {
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    alert(this.state.text);
}

render() {
    return 
}
不變組件禁用更新

對于不需要更新的組件，可以在 shouldComponentUpdate() 中 return false，或者使用 Stateless Component

// Bad
class Logo extends Component {
    render() {
        return 
;
    }
}
// Good
class Logo extends Component {
    shouldComponentUpdate() {
        return false;
    }

    render() {
        return 
;
    }
}

// or Stateless Component
const Logo = () => 
;
參考文章

React performance

How to Make Your React Apps 15x Faster

Avoid bind when passing props

Optimizing rendering React components

原文地址: http://t.cn/RIOBUe4

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86633.html

相關(guān)文章

  • 前端每周清單第 34 期：Vue 現(xiàn)狀盤點與 3.0 展望，React 代碼遷移與優(yōu)化，圖片優(yōu)化詳論

    摘要：工程實踐立足實踐，提示實際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一不過本文卻是打破砂鍋問到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會拖慢性能，過度的性能優(yōu)化反而會有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

    CoderStudy 評論0 收藏0

  • 前端每周清單第 43 期：2017 JavaScript 回顧、Rust 與 WebAssembly

    摘要：楊冀龍是安全焦點民間白帽黑客組織核心成員，被浪潮之巔評為中國新一代黑客領(lǐng)軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創(chuàng)業(yè)者技術(shù)創(chuàng)業(yè)踩過的坑給技術(shù)創(chuàng)業(yè)者建議等內(nèi)容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為...

    xorpay 評論0 收藏0

  • 高性能迷你React框架 anu1.2 發(fā)布，支持React16的三大特性

    摘要：支持的三大特征，組件支持返回數(shù)組，傳送門與錯誤邊界。下面是新支持的特性的第一個參數(shù)可以是數(shù)組，字符串，數(shù)字，。有了它，成為對錯誤處理最完善的框架。虛擬的結(jié)構(gòu)發(fā)生變化，每個節(jié)點都有等描述自己位置的屬性。 anu已經(jīng)有兩個月沒有發(fā)布了，經(jīng)過1.1.5-pre, 1.1.5-pre2, 1.1.5-pre3, 1.1.5-pre4, 1.1.5-pre5, 1.1.5-pre6, 最終放棄了...

    whidy 評論0 收藏0

  • WebAssembly 系列（六）WebAssembly 的現(xiàn)在與未來

    摘要：目前正在開發(fā)兩個編譯器系統(tǒng)。這就意味著有很多功能還在襁褓之中，沒有經(jīng)過徹底思考以及實際驗證。這些特性叫做未來特性。實現(xiàn)這一功能將會使用中的，而這一功能的實現(xiàn)將會提高程序執(zhí)行的效率。目前瀏覽器在逐漸支持用標(biāo)記來加載模塊。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58ce7fd3a6...

    mcterry 評論0 收藏0

  • 圖說 WebAssembly（五）：高性能原因

    摘要：本文是圖說系列文章的第五篇。這樣的話，使用的開發(fā)者也不需要做任何適配，但是它們卻能獲得更高性能。該圖并不是用來準(zhǔn)確的衡量其性能的。運(yùn)行編寫出高性能的代碼是可能的。這種清理工作由引擎自動進(jìn)行，稱為垃圾回收。 本文是圖說 WebAssembly 系列文章的第五篇。如果您還未閱讀之前的文章，建議您從第一篇入手。 在上一篇文章中，我們說到了使用 WebAssembly 和 JavaScript...

    seal_de 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<