Pure Components

Question

我修改了react-virtualized Grid中的简单示例，如下所示。虽然这段代码有效，但我有两个问题：

如何修改示例，以便在timer callback，quoteChange上用随机值调用。
如果我修改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

如果我修改quoteList，Grid会自动更新而不调用cellRenderer吗？

没有。这是at the beginning of the docs。 ;）

Pure Components

默认情况下，所有反应虚拟化组件都使用shallowCompare来避免重新渲染，除非props或state已更改。当集合的数据发生变化时，这会使用户感到困惑（例如['a','b','c'] =＆gt; ['d','e','f']）但道具不会（例如array.length）。

解决这个问题的方法是让反应虚拟化知道外部事物发生了变化。这可以通过几种不同的方式完成。

传递道具

shallowCompare方法将检测任何道具的更改，即使它们未声明为propTypes。这意味着您还可以传递影响单元格渲染的其他属性，以确保检测到更改。例如，如果您使用List呈现可能在初始渲染后重新排序的项目列表 - 反应 - 虚拟化通常不会检测排序操作，因为它所处理的属性都不会更改。但是，您可以通过其他sort属性来触发重新呈现。例如：

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

公共方法
可以使用Grid强制重新呈现
Collection和forceUpdate个组件。对于Table和List，您需要致电forceUpdateGrid以确保内部Grid也已更新。

react-virtualized动态更新网格

1 个答案:

Pure Components

传递道具

公共方法