react16在不更新引用的情况下怎么刷新控件

项目从react15升级到**react16**后遇到一个不刷新的问题,我知道16对于props的校验更为严格了,如果引用不变是不会触发控件刷新的。

但是我们的项目自己做了数据的双向绑定,所以很希望我们在使用**antd**的**Table**时,**datasource**的引用不要变,变了会很麻烦。

所以想请问各位大佬,有没有办法,在datasource的引用不变的情况下(也不希望一直刷新key),仍然能让antd的table重新渲染。

需求场景就是像表格内添加、删除数据这种。谢谢!

参考GPT和自己的思路:

对于这种情况,可以使用以下方法来强制刷新antd的Table:

  1. 调用Table组件的forceUpdate方法,让组件重新渲染。代码如下:
<Table
  dataSource={dataSource}
  columns={columns}
  ref={(table) => { this.table = table; }}
/>
...
this.table.forceUpdate();
  1. 在Table的dataSource数据发生改变时,手动修改这个数据的一个属性,使得这个属性的值改变,从而强制触发组件的重新渲染。代码如下:
constructor(props) {
  super(props);
  this.state = {
    dataSource,
    dataVersion: 0,
  };
}
...
handleAddData = () => { // 添加数据的方法
  const { dataSource, dataVersion } = this.state;
  const newData = getNewData(); // 获取新数据
  this.setState({
    dataSource: [...dataSource, newData],
    dataVersion: dataVersion + 1, // 强制刷新组件
  });
};
...
<Table dataSource={dataSource} columns={columns} key={dataVersion} />

以上两种方法可以让您在datasource不变的情况下,仍然能让antd的table重新渲染,适用于表格内添加、删除数据等需求场景。