反应表不断重新渲染未更改的单元格

时间:2019-11-14 13:41:41

标签: reactjs performance rendering react-table

我正在使用react-table插件,并且当我更改应用的搜索过滤器时,即使它们的值没有更改,我的单元格仍会重新渲染。

从视频中可以看到,名称和债务TD保持更新,即使它们的值是静态的。

https://i.imgur.com/2KkNs9f.mp4

我想这可能会影响较大表的性能。

有没有解决办法?还是我做错了什么?

谢谢。

编辑:

已请求代码。没什么可显示的,基本上所有操作都与文档中一样。

渲染部分:

render(){

const columns = [
      {
        Header: "Name",
        accessor: "name",
        className: css.cell,
        headerClassName: css.cell,
        filterMethod: (filter, row) => {
          return row[filter.id]
            .toLowerCase()
            .includes(filter.value.toLowerCase());
        },
        Cell: props => {
          return <span>{props.value}</span>;
        }
      },
      {
        Header: "Tc",
        accessor: d => {
          const date = d.lastChange;

          if (date.length) {
            const s = date.split(" ");
            const s2 = s[0].split("/");
            const mdy = [s2[1], s2[0], s2[2]].join("/");
            const his = s[1];
            return Date.parse(mdy + " " + his);
          }
          return "";
        },
        id: "lastChange",
        Cell: props => {
          return <ArrowTime lastChange={props.value}></ArrowTime>;
        },
        headerClassName: css.cell,
        className: css.cell
      },
      {
        Header: "Debt",
        accessor: d => Number(d.lastDebt),
        id: "lastDebt",
        headerClassName: css.cell,

        className: css.cell,
        Cell: props => {
          return <span className="number">{props.value}</span>;
        },
        getProps: (state, rowInfo, column) => {
          return {
            style: {
              background: rowInfo ? this.getColor(rowInfo.row.lastDebt) : null
            }
          };
        }
      }
    ];
     return (
          <ReactTable
            data={this.props.table}
            columns={columns}
            minRows={0}
            showPagination={false}
            NoDataComponent={CustomNoDataComponent}
            className={css.table}
            resizable={false}
            filtered={[{ id: "name", value: this.props.filter }]}
            getTrProps={(state, rowInfo) => {
              return {
                className: rowInfo ? css.subRow : ""
              };
            }}
            getTrGroupProps={(state, rowInfo) => {
              return {
                className: rowInfo ? css.row : ""
              };
            }}
            getTbodyProps={props => {
              return {
                className: props ? css.tbody : ""
              };
            }}
            getTheadProps={props => {
              return {
                className: props ? css.thead : ""
              };
            }}
            defaultSorted={[
              {
                id: "lastDebt",
                desc: true
              }
            ]}
          />
        );
}

0 个答案:

没有答案