国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React Render Array 性能大亂斗

wenshi11019 / 445人閱讀

摘要:現(xiàn)在關于最新版本新特性的宣傳講解已經(jīng)鋪天蓋地了。測試場景是反復操作數(shù)組,這個反復操作有所講究,我們計劃持續(xù)不斷地改變數(shù)組的某一項而不是整個數(shù)組的大范圍變動。代碼和性能測試在使用開發(fā)時,相信很多開發(fā)者在搭配函數(shù)式的狀態(tài)管理框架使用。

現(xiàn)在關于 React 最新 v16 版本新特性的宣傳、講解已經(jīng)“鋪天蓋地”了。你最喜歡哪一個 new feature?
截至目前,組件構(gòu)建方式已經(jīng)琳瑯滿目。那么,你考慮過他們的性能對比嗎?這篇文章,聚焦其中一個小細節(jié),進行對比,望讀者參考的同時,期待大神斧正。

從 React.PureComponent 說起

先上結(jié)論:在我們的測試當中,使用 React.PureComponent 能夠提升 30% JavaScript 執(zhí)行效率。測試場景是反復操作數(shù)組,這個“反復操作”有所講究,我們計劃持續(xù)不斷地改變數(shù)組的某一項(而不是整個數(shù)組的大范圍變動)。

線上參考地址: 請點擊這里

那么這樣的場景,作為開發(fā)者有必要研究嗎?如果你的應用并不涉及到高頻率的更新數(shù)組某幾項,那么大可不必在意這些性能的微妙差別。但是如果存在一些“實時更新”的場景,比如:

用戶輸入改變數(shù)組(點贊者顯示);

輪詢(股票實時);

推更新(比賽比分實時播報);

那么就需要進行考慮。我們定義:changedItems.length / array.length 比例越小,本文所涉及的性能優(yōu)化越應該實施,即越有必要使用 React.PureComponent。

代碼和性能測試

在使用 React 開發(fā)時,相信很多開發(fā)者在搭配函數(shù)式的狀態(tài)管理框架 Redux 使用。Redux reducers 作為純函數(shù)的同時,也要保證 state 的不可變性,在我們的場景中,也就是說在相關 action 被觸發(fā)時,需要返回一個新的數(shù)組。

const users = (state, action) => {
  if (action.type === "CHANGE_USER_1") {
    return [action.payload, ...state.slice(1)]
  }
  return state
}

如上代碼,當 CHANGE_USER_1 時,我們對數(shù)組的第一項進行更新,使用 slice 方法,不改變原數(shù)組的同時返回新的數(shù)組。

我們設想所有的 users 數(shù)組被 Users 函數(shù)式組件渲染:

import User from "./User"
const Users = ({users}) =>
  
{ users.map(user => }

問題的關鍵在于:users 數(shù)組作為 props 出現(xiàn),當數(shù)組中的第 K 項改變時,所有的 組件都會進行 reconciliation 的過程,即使非 K 項并沒有發(fā)生變化。

這時候,我們可以引入 React.PureComponent,它通過淺對比規(guī)避了不必要的更新過程。即使淺對比自身也有計算成本,但是一般情況下這都不值一提。

以上內(nèi)容其實已經(jīng)“老生常談”了,下面直接進入代碼和性能測試環(huán)節(jié)。

我們渲染了一個有 200 項的數(shù)組:

const arraySize = 200;
const getUsers = () =>
  Array(arraySize)
    .fill(1)
    .map((_, index) => ({
      name: "John Doe",
      hobby: "Painting",
      age: index === 0 ? Math.random() * 100 : 50
    }));
    

注意在 getUsers 方法中,關于 age 屬性我們做了判斷,保證每次調(diào)用時,getUsers 返回的數(shù)組只有第一項的 age 屬性不同。
這個數(shù)組將會觸發(fā) 400 次 re-renders 過程,并且每一次只改變數(shù)組第一項的一個屬性(age):

  const repeats = 400;
  componentDidUpdate() {
    ++this.renderCount;
    this.dt += performance.now() - this.startTime;
    if (this.renderCount % repeats === 0) {
      if (this.componentUnderTestIndex > -1) {
        this.dts[componentsToTest[this.componentUnderTestIndex]] = this.dt;
        console.log(
          "dt",
          componentsToTest[this.componentUnderTestIndex],
          this.dt
        );
      }
      ++this.componentUnderTestIndex;
      this.dt = 0;
      this.componentUnderTest = componentsToTest[this.componentUnderTestIndex];
    }
    if (this.componentUnderTest) {
      setTimeout(() => {
        this.startTime = performance.now();
        this.setState({ users: getUsers() });
      }, 0);
    } else {
      alert(`
        Render Performance ArraySize: ${arraySize} Repeats: ${repeats}
        Functional: ${Math.round(this.dts.Functional)} ms
        PureComponent: ${Math.round(this.dts.PureComponent)} ms
        Component: ${Math.round(this.dts.Component)} ms
      `);
    }
  }

為此,我們采用三種方式設計 組件。

函數(shù)式方式
export const Functional = ({ name, age, hobby }) => (
  
{name} {age} {hobby}
);
PureComponent 方式
export class PureComponent extends React.PureComponent {
  render() {
    const { name, age, hobby } = this.props;
    return (
      
{name} {age} {hobby}
); } }
經(jīng)典 class 方式
export class Component extends React.Component {
  render() {
    const { name, age, hobby } = this.props;
    return (
      
{name} {age} {hobby}
); } }

同時,在不同的瀏覽器環(huán)境下,我得出:

Firefox 下,PureComponent 收益 30%;

Safari 下,PureComponent 收益 6%;

Chrome 下,PureComponent 收益 15%;

測試硬件環(huán)境:

最終結(jié)果:

最后,送給大家魯迅先生的一句話:

“Early optimization is the root of all evil”?- 魯迅

Happy Coding!
PS: 作者?Github倉庫?和?知乎問答鏈接?歡迎各種形式交流。

我的其他幾篇關于React技術棧的文章:
React Redux 中間件思想遇見 Web Worker 的靈感(附demo)
了解 Twitter 前端架構(gòu) 學習復雜場景數(shù)據(jù)設計
React 探秘 - React Component 和 Element(文末附彩蛋demo和源碼)
從setState promise化的探討 體會React團隊設計思想
通過實例,學習編寫 React 組件的“最佳實踐”
React 組件設計和分解思考
從 React 綁定 this,看 JS 語言發(fā)展和框架設計
React 服務端渲染如此輕松 從零開始構(gòu)建前后端應用
做出Uber移動網(wǎng)頁版還不夠 極致性能打造才見真章**
React+Redux打造“NEWS EARLY”單頁應用 一個項目理解最前沿技術棧真諦**

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/89329.html

相關文章

  • 2017-10-27 前端日報

    摘要:前端日報精選裝飾器場景實戰(zhàn)配置之后端渲染理解同步異步和事件循環(huán)編寫高性能注意點線性漸變實現(xiàn)虛線等簡單實用圖形中文服務端渲染開發(fā)指南個人文章系列之事件類型個人文章使用必記掘金簡介掘金性能大亂斗前端雜談中簡單的數(shù)據(jù)圖形化 2017-10-27 前端日報 精選 JS 裝飾器(Decorator)場景實戰(zhàn)webpack配置之后端渲染JavaScript:理解同步、異步和事件循環(huán)編寫高性能js注...

    Jeffrrey 評論0 收藏0
  • 像素,css像素,物理像素,設備獨立像素,分辨率大亂

    摘要:我們用小米舉例,屏幕像素物理像素為,設備獨立像素為,也就是說,一個設備獨立像素就包含個物理像素,同時我們能得出。 本文主要闡述移動端布局中常遇到的一些基本概念,這些概念也適用于PC端,這些概念大概有:像素(pixel),ppi,分辨率,物理像素(physical pixel), CSS像素,設備獨立像素(devicedependent pixel) 像素 像素是圖像顯示的基本單位,同時...

    LiveVideoStack 評論0 收藏0
  • 2017文章總結(jié)

    摘要:歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評論0 收藏0
  • 2017文章總結(jié)

    摘要:歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    hellowoody 評論0 收藏0

發(fā)表評論

0條評論

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