javascript - react-virtualized 动态更新网格

Question

我将react-virtualized Grid中的简单示例修改如下。虽然这段代码有效，但我有一个分为两部分的问题:

1. 如何修改示例，以便在 timer callback 上，quoteChange 将是用随机值调用。
2. 如果我修改 quoteList，Grid 会自动更新而不调用 cellRenderer 吗？

代码。我们的想法是让应用程序看起来像是在显示流式实时报价。请注意，quoteChange 当前不执行任何操作。这是我第一次尝试的微弱尝试。

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

// Grid data as an array of arrays
const quoteList = [
  ['GE', 100, 35.28, 35.30, 100, 95125],
  ['IBM', 100, 135.11, 135.20, 100, 195125],
  ['C', 100, 45.23, 45.30, 100, 195125]
];

function quoteChange(ri, bid, ask)
{
    quoteList[ri][2] = bid
    quoteList[ri][3] = ask

    var bi = {
        columnIndex : 2,
        rowIndex : ri,
    }

    cellRenderer(bi)

    var ba = {
        columnIndex : 3,
        rowIndex : ri,
    }

    cellRenderer(ba)
}

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <div
      key={key}
      style={style}
    >
      {quoteList[rowIndex][columnIndex]}
    </div>
  )  
}

// Render your grid
ReactDOM.render(
  <Grid
    cellRenderer={cellRenderer}
    columnCount={quoteList[0].length}
    columnWidth={50}
    height={quoteList.length * 20}
    rowCount={quoteList.length}
    rowHeight={20}
    width={800}
  />,
  document.getElementById('root')
);

Answer 1

If I modify the quoteList, will the Grid automatically update without calling cellRenderer ?

没有。这个提到at the beginning of the docs . ;)

Pure Components

By default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed. This ocassionally confuses users when a collection's data changes (eg ['a','b','c'] => ['d','e','f']) but props do not (eg array.length).

The solution to this is to let react-virtualized know that something external has changed. This can be done a couple of different ways.

Pass-thru props

The shallowCompare method will detect changes to any props, even if they aren't declared as propTypes. This means you can also pass through additional properties that affect cell rendering to ensure changes are detected. For example, if you're using List to render a list of items that may be re-sorted after initial render- react-virtualized would not normally detect the sort operation because none of the properties it deals with change. However you can pass through the additional sort property to trigger a re-render. For example:

<List
  {...listProps}
  sortBy={sortBy}
/>

Public methods

Grid and Collection components can be forcefully re-rendered using forceUpdate. For Table and List, you'll need to call forceUpdateGrid to ensure that the inner Grid is also updated.