react ant 表格滚动设置固定高度

自动调整有难度。需要手动让储存格适应。按以下方法： 调整宽度：鼠标移动到表格最上边的字母上面，鼠标会变成向下黑色箭头，选中要改变的列，鼠标移动到这一列的边缘，等变成形状的时候双击，即可自动适应 同理可以调整高度。

如果你的应用渲染了长列表（上百甚至上千的数据）时，React官网推荐我们使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。

React官网推荐我们使用 react-window 和 react-virtualized 这2个热门的虚拟滚动库。它们提供了多种可复用的组件，用于展示列表、网格和表格数据。

这2个库，出自于同一个作者。react-virtualized是作者对React和窗口概念都不熟悉时写的，加了一些API和添加了太多非必要的功能和组件，后来作者后悔了，但因为一旦向开源项目添加了一些东西，删除它对用户来说是非常痛苦的。所以作者完整重写了react-virtualized，并且更专注于使包装更小和更快。所以 react-window 是react-virtualized的轻量级替代品。

我使用的是VariableSizeGrid（可变尺寸网格）。

问题1：使用itemData进行网格中数据的传递时，当columnCount（网格中的列数）rowCount（网格中的行数）>itemDatalength，会出现网格滚动到最后一行时，最后一行没有被渲染。

方案1：给itemData 数组push（columnCountrowCount- itemDatalength）个对象｛true:true｝，然后在组件render时，进行判断return（<div></div>）

问题2：网格可以100％填充页面的宽度或高度吗？（这个问题作者有在npm上回答过）

方案2：网格宽高必须传入number类型，所以不能直接写’100%’，需要使用react-virtualized-auto-sizer包。

问题3：这个比较重要，没有提供可以传递方法的API。提供了可以在外层附加自定义属性或事件处理程序的API：outerElementType。但不能满足我想要点击按钮时才触发事件的需求。

方案3： JavaScript设计模式之观察者模式

一般使用 React 的组件都是挂到父组件的 thispropschildren 上面，总是被最近的父组件所捕获，最终到 React 根组件上。

而 Protals 则提供了一种将组件直接挂载到直接父组件 DOM 层次之外的一类方式。

react-dom 提供的具体方法是 ReactDOMcreatePortals(child, container) ，这个方法需要两个参数，第一个参数是需要挂载的组件实例，而第二个参数则是要挂载到的DOM节点。一般来说第一个参数可能传递的是需要挂载的 thispropschildren

正常来说，我要创建一个 Modal 组件，可以按照下面这么写：

而使用的时候直接引入并且写子组件即可：

最终的效果如下：

Modal 的组件实例这种实现方式也可以，这里的突破方式其实就是直接将 Modal 组件位置进行 fixed 定位。

但是更多时间如果父组件容器存在 overflow: hidden 或者存在 z-index 的时候，需要在视觉上突破父组件的容器，使用 createPortal 更好一些，因为他可以随便将组件挂到任何的 DOM 下。

为了突出 div#root 容器宽度高度很小，并且 overflow:hidden ，给 div#root 一个样式：

新的 Modal 容器组件内容如下：

因为需要保证 ModalContainer 始终保持在最上层，不会被其他 z-index 覆盖掉，因此需要给 div#modal-root 一个样式：

上面只是 Modal 的容器组件，最主要的作用就是将 thispropschildren 挂载到组件外部去（ div#modal-root ）

需要创建 Modal 需要显示的内容组件：

将 ModalContent 挂载到 ModalContainer 中即可：

可以发现，即使主组件是 overflow:hidden 的，但是 modal 能够正常出现，同时，因为 div#modal-root 是 z-index: 999 ，因此会置于最上层。

可以发现，在父组件里捕获一个来自 Portal 的事件冒泡很简单，在开发时不需要完全依赖于 Portal ，对于事件的捕获更加的灵活。

1React中的事件是包装过的

2它的 事件冒泡 是根据虚拟DOM树来冒泡，与真实的DOM树无关

使用了两次card导致。

利用react-to-print插件打印页面中的某一个部分（使用插件可看官方文档），插件使用没有问题，但是打印的部分显示不全，即不能自适应页面内容。

调节过css样式，通过给网页打印部分设置一个高度可以看见一部分内容，但是这是不合理的，内容的高度是变化的，所以应该是自适应高度。经过反复的排查发现页面中使用了两次card导致，可能是card的css样式问题。

存在一个数据量大的列表，如select、list，可能存在1000个数据项

传统做法是直接将1000个item渲染到页面上，即渲染1000个dom

从上图可以看出，可视区域范围内，仅有7个item，也就是说，不可见的993个元素的存在是浪费资源，从而导致渲染时占满内存、造成页面卡顿。

从这里我们可以入手优化这个list。

既然可视区域只有至多7个元素可见，那么就仅仅渲染这7个dom，不渲染剩下的993个dom。

我们需要计算出如下的数据：

我们可以用到 offsetHeight 属性，元素的可视高度

在此之前需要先定义一个滚动容器，并使用ref将其管理起来，并且设置容器高度 height ，和 overflow-y ， 让它滚动起来。 这里为了组件的通用性，我们将 height 和 width 都通过父组件传入的方式获取。

这里我们需要先将第一个子元素渲染出来才能动态地获取它的高度， 同样，我们将列表通过props传入

用可视化区域的高度 除以 单个元素的高度，再向上取整，因为存在一些可见，但是不完全可见的元素，所以这里向上取整。

滚动容器中有个属性叫 scrollTop ，表示当前已滚动的高度，也就是上方不可见的区域。

我们用 scrollTop 除以单个元素的高度 domHeight ，再向下取整，即可得到当前可见区域第一个元素的下标。

至此我们可以将上边需要动态计算的几个变量存入state

下面开始渲染。

这里需要截取 listDom ， 使用 slice() 方法。截取起始位置为 currentIndex ，结束为止为 currentIndex + domCount

在这里我们会发现，列表上只有7个元素，且无法滚动

我们还没有给元素绑定滚动事件。

这里我们将上述计算逻辑提到一个函数中进行，并将其绑定scroll

绑定事件后发现还是无法滚动

原来我们还需要给列表设置上下空白区域，撑开列表，不然无法模拟出来真是列表的高度。

我们继续计算上下空白的高度。

上空白的高度，我们已经计算出了当前可视区域第一个元素的下标了，也计算出了单个元素的站位高度那么

下空白的高度

整个列表的高度 - 可视区域的元素高度 - 上空白的高度

将这两个变量也存入state

然后再将上下两个空白元素添加到dom结构中占位，此时需要将计算 domHeight 的取值下标改为[1]

这里可以看到dom结构中只有几个可见的dom, 并且滑动时动态变化。

渲染效率也大大提高。

可以明显感觉到变快了

在这里我们渲染的时候事在对 listDom 在不断地增删、也就是在不断的增加、删除dom。

那么可不可以不增加删除、或者尽量少地增加删除dom实现我们的功能呢？

element_diff (相同层级的虚拟dom发生变化)

如滚动前 A B C D

滚动后 B C D E

如果不加key，则无法判断 B C D是否还是原来的B C D

对比时 发现A!=B，则会删除A，添加B，以此类推 删除B C D、插入 C D E

添加key后，发现B C D没有变化 ，仅仅需要删除A 插入E即可

以上就是关于react ant 表格滚动设置固定高度全部的内容，包括:react ant 表格滚动设置固定高度、记录React性能优化之“虚拟滚动”技术——react-window、React.createPortal 及 Modal 的新实现方式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！