概述

在展示大型列表和表格資料的時候（城市列表、通訊錄、微博等），會導致頁面卡頓，滾動不流暢等效能問題，這樣就會導致移動裝置耗電加快，影響移動裝置的電池壽命

產生效能問題的元素：大量DOM節點的重繪和重排

優化方案：

• 懶渲染
• 可視區域渲染

懶渲染

• 懶載入，常見的長列表優化方案，常見於移動端
• 原理：每次只渲染一部分，等渲染的資料即將滾動完時，再渲染下面部分
• 優點：每次渲染一部分資料，速度快
• 缺點：資料量大時，頁面中依然存在大量DOM節點，佔用記憶體過多，降低瀏覽器渲染效能，導致頁面卡頓
• 使用場景：資料量不大的情況下

可視區渲染（React-virtualized）

原理： 只渲染頁面可視區域的列表項，非可視區域的資料 完全不渲染(預載入前面幾項和後面幾項)

react-virtualized

概述 

在專案中的應用：實現城市選擇列表頁面的渲染 - react-virtualized 是React元件，用來高效渲染大型列表和表格資料 -

GitHub地址： [react-virtualized](https://github.com/bvaughn/react-virtualized)

基本使用 -安裝：

yarn add react-virtualized 

在專案入口檔案 index.js 中匯入樣式檔案 -

開啟 (https://github.com/bvaughn/react-virtualized/blob/master/docs

import React from 'react';
import ReactDOM from 'react-dom';
import { List } from 'react-virtualized';

// 列表資料
const list = [
  'Brian Vaughn'
  // And so on...
];
// 渲染每一行的內容
function rowRenderer ({
  key,         // Unique key within array of rows
  index,       //
 
 索引號
  isScrolling, // 當前項是否正在滾動中
  isVisible,   // 當前項在List中是可見的
  style        // 重點屬性：一定要給每一個行數新增該樣式
}) {
  return (
    <div
      key={key}
      style={style}
    >
      {list[index]}
    </div>
  )
}

// 渲染list列表
ReactDOM.render(
  <List
    // 元件的寬度
    width={300}
    // 元件的高度
    height={300}
    rowCount={list.length}
    // 每行的高度
    rowHeight={20}
    rowRenderer={rowRenderer}
  />,
  document.getElementById('example')
);

### 讓List元件佔滿螢幕

- 利用 `AutoSizer` 元件來調整子元素的寬高
- 匯入 `AutoSizer` 元件
- 通過 render-props 模式，獲取到`AutoSizer` 元件暴露的 width 和 height 屬性
- 設定List元件的 width  和 height 屬性

- 設定選擇頁面根元素高度 100%，讓List元件佔滿整個頁面
- 給list元件新增onRowsRendered配置項，用於獲取當前列表渲染的行資訊，在裡面就會有相應資訊
- 通過引數 startIndex 獲取到 起始行對應的索引號
- 判斷 startIndex 和 activeIndex 不同時候，更新狀態 activeIndex為 startIndex

<List
    ...
    onRowsRendered={this.rowRendered}
/>

/**
 * 獲取滾動時候,相應的資料
 * @param {*} param0 
 */
rowRendered = ({ startIndex }) => {
    if (this.state.activeIndex !== startIndex) {
        this.setState({
            activeIndex: startIndex
        })
    }
}