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

我正在使用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>;
        },classname: css.cell
      },{
        Header: "Debt",accessor: d => Number(d.lastDebt),id: "lastDebt",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
              }
            ]}
          />
        );
}
c139261 回答:反应表不断重新渲染未更改的单元格

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3102135.html

大家都在问