时间戳

首页 > 解决方案 > 从表开始添加或删除时，React memo 会重新呈现后续表行

reactjs - 从表开始添加或删除时，React memo 会重新呈现后续表行

问题描述

我有一张桌子，每一行都在里面React.memo。在那个记忆化的组件中，我有自定义函数比较器。但是每次我向表开始添加行或从开始删除行时，表都会重新呈现每一行。

示例：将行添加到表末尾 => 一切正常，没有额外的重新渲染。将行添加到表 start => 每行重新呈现其内容。

我希望我的备忘录在我删除一个表格行时不会重新呈现每个表格行。

表格行代码：

const RowMemo = React.memo(({ row, rowIndex }) => {
  console.log('RowMemo renders');
  return <tr key={row.id} className="tr">
{"some contents"}
  </tr>
}, function compare(prev, next) {
  let keysToCompare = ['row', 'rowIndex']

  let isSame = true
  let diffKeys = []
  for (let key of keysToCompare) {
    if (prev[key] != next[key]) {
      diffKeys.push(key)
      // console.log('diff key', key) // shows that only row differs
    }
  }
  if (diffKeys.length) {
    isSame = false;
  }

  if (!isSame)
    console.log('isSame', isSame, prev.row == next.row, prev.row.id, next.row.id); // different rows, that's why it re-renders. 

  return isSame;
})

行渲染简单明了：

myRows.map((row, rowIndex) =>
                  <RowMemo {...{ row, rowIndex }} />
                )

删除一行也很简单：

function removeTableProgramFormList(e, row) {
    setTableProgramFormList(prevState => prevState.filter(row => row != row));
  }

标签： reactjsrerender

解决方案

您应该将key属性添加到更高一级，在此处迭代和渲染RowMemo组件。

myRows.map((row, rowIndex) =>
                  <RowMemo key={row.id} {...{ row, rowIndex }} />
                )

推荐阅读