成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

大幅提升 React 性能的6個(gè)建議

Yu_Huang / 3218人閱讀

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

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

設(shè)置 NODE_ENV 為 Production

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

如果你使用 Webpack，你可以使用 DefinePlugin 來(lái)替換 process.env.NODE_ENV 為 "production"，然后使用 UglifyJsPlugin 移除這些不會(huì)執(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àng)是，使用在現(xiàn)代化瀏覽器中性能更好的 document.createElement 替換 innerHTML，這一改動(dòng)也意味著 React 將不再支持 IE8

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

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

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

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

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

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

        
)
    }
}
// Good
// 當(dāng) user.name 更新時(shí)，列表不會(huì)重新渲染
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)該盡早聲明，而不是在渲染時(shí)定義

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

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

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

對(duì)于不需要更新的組件，可以在 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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86633.html

相關(guān)文章

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

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

    CoderStudy 評(píng)論0 收藏0

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

    摘要：楊冀龍是安全焦點(diǎn)民間白帽黑客組織核心成員，被浪潮之巔評(píng)為中國(guó)新一代黑客領(lǐng)軍人物之一他在本文中依次分享了對(duì)于黑客的定義如何從黑客成為一名安全創(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)容，以對(duì)外文資料的搜集為...

    xorpay 評(píng)論0 收藏0

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

    摘要：支持的三大特征，組件支持返回?cái)?shù)組，傳送門與錯(cuò)誤邊界。下面是新支持的特性的第一個(gè)參數(shù)可以是數(shù)組，字符串，數(shù)字，。有了它，成為對(duì)錯(cuò)誤處理最完善的框架。虛擬的結(jié)構(gòu)發(fā)生變化，每個(gè)節(jié)點(diǎn)都有等描述自己位置的屬性。 anu已經(jīng)有兩個(gè)月沒有發(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 評(píng)論0 收藏0

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

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

    mcterry 評(píng)論0 收藏0

  • 圖說(shuō) WebAssembly（五）：高性能原因

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

    seal_de 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<