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

Yu_Huang 發布于2019-08-21 11:22 / 3175人閱讀

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

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

設置 NODE_ENV 為 Production

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

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

// 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 的更新中非常重要的一項是，使用在現代化瀏覽器中性能更好的 document.createElement 替換 innerHTML，這一改動也意味著 React 將不再支持 IE8

Babel Constant 和 Inline Elements 轉換

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

封裝集合渲染為獨立組件

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

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

// Good
// 當 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() 中綁定的方法應該盡早聲明，而不是在渲染時定義

// 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

云服務器 GPU云服務器 6個機柜的機房大概需要多少錢性能提升提升性能方案提升區塊鏈性能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86633.html

前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

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

CoderStudy 2019-08-21 16:56 評論0 收藏0
前端每周清單第 43 期：2017 JavaScript 回顧、Rust 與 WebAssembly

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

xorpay 2019-08-22 11:15 評論0 收藏0
高性能迷你React框架 anu1.2 發布，支持React16的三大特性

摘要：支持的三大特征，組件支持返回數組，傳送門與錯誤邊界。下面是新支持的特性的第一個參數可以是數組，字符串，數字，。有了它，成為對錯誤處理最完善的框架。虛擬的結構發生變化，每個節點都有等描述自己位置的屬性。 anu已經有兩個月沒有發布了，經過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 2019-08-22 11:19 評論0 收藏0
WebAssembly 系列（六）WebAssembly 的現在與未來

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

mcterry 2019-08-20 15:09 評論0 收藏0
圖說 WebAssembly（五）：高性能原因

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

seal_de 2019-08-22 16:59 評論0 收藏0