解析 Antd Table 组件的错位和性能问题

import { Table } from 'antd';
const columns = [
 {
   title: 'Full Name',
   width: 100,
   dataIndex: 'name',
   key: 'name',
 fixed: 'left',
 },
 {
   title: 'Age',
   width: 100,
   dataIndex: 'age',
   key: 'age',
 fixed: 'left',
 },
 { title: 'Column 1', dataIndex: 'address', key: '1' },
 { title: 'Column 2', dataIndex: 'address', key: '2' },
 { title: 'Column 3', dataIndex: 'address', key: '3' },
 { title: 'Column 4', dataIndex: 'address', key: '4' },
 { title: 'Column 5', dataIndex: 'address', key: '5' },
 {
   title: 'Avatar',
   width: 200,
   dataIndex: 'img',
   key: 'img',
   render: (a, row ,b) => (
 <img src={row.img}></img>
 )
 },
 { title: 'Column 6', dataIndex: 'address', key: '6' },
 { title: 'Column 7', dataIndex: 'address', key: '7' },
 { title: 'Column 8', dataIndex: 'address', key: '8' },
 {
   title: 'Action',
   key: 'operation',
 fixed: 'right',
   width: 100,
   render: () => <a href="javascript:;">action</a>,
 },
];
const data = [
 {
 key: '1',
 name: 'John Brown',
 age: 32,
 address: 'New York Park',
 img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566139960708
&di=b71fcbe1841e966f5fd3983197628ff9&imgtype=0&src=http%3A%2F%2Fpic1.16xx8.com%2Fallimg%2F161122%2F1F0035M6-7.jpg'
 },
 {
 key: '2',
 name: 'Jim Green',
 age: 40,
 address: 'London Park',
 img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566139968891&di=c0b7ecc441817226dabc251d870f6d22
&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a949581aeb9fa84a0d304fd05eeb.jpg'
 },
];
ReactDOM.render(<Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />, mountNode);

syncFixedTableRowHeight = () => {
 //...
 //搜寻主 Table 所有行元素
 const bodyRows = this.bodyTable.querySelectorAll(`.${prefixCls}-row`) || [];
 //...
 const state = this.store.getState();
 //获取主 Table 的行高
 const fixedColumnsBodyRowsHeight = [].reduce.call(
  bodyRows,
 (acc, row) => {
 const rowKey = row.getAttribute('data-row-key');
 const height =
    row.getBoundingClientRect().height || state.fixedColumnsBodyRowsHeight[rowKey] || 'auto';
    acc[rowKey] = height;
 return acc;
 },{},);


 //比较是否发生了，如果没有发生变化，就返回
 if (
    shallowequal(state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
    shallowequal(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)
 ) {
 return;
 }

 //如果发生了变化，就同步变化
 this.store.setState({
    fixedColumnsHeadRowsHeight,
    fixedColumnsBodyRowsHeight,
 });
};

createObserver() {
 return new ResizeObserver(entries => {
 const state = this.store.getState();
 const fixedColumnsHeadRowsHeight = { ...state.fixedColumnsHeadRowsHeight };
 const fixedColumnsBodyRowsHeight = { ...state.fixedColumnsBodyRowsHeight };

 const firstRowCellsWidth = { ...state.firstRowCellsWidth };

 for (let i = 0; i < entries.length; i++) {
 const entry = entries[i];
 const { target } = entry;
 const headerRowIndex = target.getAttribute('data-header-row-index')
 const rowKey = target.getAttribute('data-row-key');
 const columnKey = target.getAttribute('data-column-Key')
 const { width, height } = target.getBoundingClientRect();

 if (headerRowIndex !== null) {
 if (fixedColumnsHeadRowsHeight[headerRowIndex] !== height) {
           fixedColumnsHeadRowsHeight[headerRowIndex] = height;
 }
 }
 if (rowKey !== null) {
 if (fixedColumnsBodyRowsHeight[rowKey] !== height) {
          fixedColumnsBodyRowsHeight[rowKey] = height;
 }
 }
 if (columnKey !== null) {
 if (
        firstRowCellsWidth[columnKey] === undefined ||
        width !== firstRowCellsWidth[columnKey]
 ) {
        firstRowCellsWidth[columnKey] = width;
 }
 }
 }
 this.store.setState({
    fixedColumnsHeadRowsHeight,
    fixedColumnsBodyRowsHeight,
    firstRowCellsWidth,
 });
 });
}