[Avatar]如何避免Table外层滚动导致body重渲染

[xmsz]

trafficstars

Component

Avatar

Feature Description

import * as React from 'react';
import {  Table } from '@alifd/next';

const Dashboard = () => {
  const [scrollLeft, setScrollLeft] = React.useState(0)
  return (
    <div style={{
      overflow:"scroll",
      width:"200px"
    }}
    onScroll={(e)=>{
      setScrollLeft(e.currentTarget.scrollLeft)
    }}
    >
      <Table 
        style={{
        width:"1200px"
      }} dataSource={[{
        id: "1"
      }]}>
          <Table.Column title='ID' dataIndex='id'/>
        </Table>
        {/* <div style={{
          width:"1200px",
          height:"100px",
          background:"blue"
        }}>
          asd
        </div> */}
    </div>
  );
};

export default Dashboard;

https://github.com/xmsz/demo-2022032201

• table外层有个滚动容器
• 滚动容器会触发setState
• 然后body就会重渲染

---

如果滚动容器里不是table而是其他组件则不会有这样问题

---

这个情况会导致在复杂一点数据很多的页面下，table横向滚动的时候只要外层触发了setState，就非常卡顿

[bindoon]

其他组件是能支持滚动的组件吗？ 这里应该是系统行为

[xmsz]

其他组件是能支持滚动的组件吗？ 这里应该是系统行为

其他组件比如

<div style={{width:2000}}/>

这种自己不滚动 但是会撑开父级滚动

[YSMJ1994]

外层组件更新触发子组件 rerender 是符合 react 设计的行为，你的问题可以使用 React.memo 包一层 Table 组件来实现