QuikieApps

反应数据表:功能,需求和安装

关于React数据表的简介:

对于成长中的初创公司而言,开发Web应用程序成为必要。这就需要创建另一个React表库。尽管存在一些表库,但是大多数表库需要大量的自定义。因此,通过缺少开箱即用的功能,例如内置在排序和理解HTML表的原子结构中的功能。为了在力和想要一个不那么复杂但灵活的表库之间取得平衡,则 反应数据表组件 是你的方式!但是,如果您需要克隆Excel或具有强大的“企业”功能,那么建议不要使用此React表库。

反应数据表组件的关键特征:

 

要求:

为了使用React Data Component,您需要在项目中预安装以下内容:

  1. 反应16.8.0+
  2. 样式化组件3.2.3+ || 4.0.0+ || 5.0.0+

 

安装:

由于React Data Table组件利用了惊人的 样式化的组件 库,您需要先在项目中安装它。

 

npm install react-data-table-component样式化的组件

或者,您也可以使用:

 

npm install react-data-table-component样式化的组件

 

一个非常基本的水平表:

 

Give声明性结构实现了电影标题的排序表:

选择我们的行:

为了使我们的行访问可选结果,我们需要使我们的行可选。

 

清除所选行:

 

需要一些钩子来触发所有selectedRows的清除。构建自己的表组件时,将在某些父组件中管理选定的行。但是,由于我们将行管理保留在React Data Table中,因此提供了一个名为clearSelectedRows的道具。这使得可以容易地传递切换状态。用户应确保自己多次通过同一状态。我们可以举个例子,如果将clearSelectRows设置为true两次,则在第二次更新时,将不会清除行。 

定义自己的主题:

 

您可以使用createTheme帮助器轻松创建自己的主题。重要的是要记住,createTheme继承自默认主题,并且该主题将可用于项目中存在的所有数据表。因此,对于我们来说,在单独的文件中定义所需的自定义主题是一个好主意。仅通过设置theme =“ dark”即可切换到暗模式设置,也非常容易。 Styles.js包含RDT样式的详细目录,可通过使用css-in-js对象来覆盖或扩展。

使用CSS-IN-JS自定义样式:

 

对于更高级的用法,可以通过使用customStyles道具然后将其传递到css-in-js中来覆盖默认样式。它的实际作用是,在内部将customStyles与以前存在的默认样式进行深度合并。执行此操作时应牢记一个令人关注的问题,那就是您完全可以独自一人在这里,因为您不仅可以自定义而且可以破坏RDT。在这里,该功能是天空的极限逃生舱口功能。

有条件的风格对象:

 

 

自定义复选框的使用和不确定状态:

 

有时,“用户界面库”复选框组件具有其自己的处理不确定状态的方式。但是我们不希望将React Data Table硬编码到特定的用户界面库或任何自定义组件。因此,作为替代方案,提供了“挂钩”,使我们可以传递任何可以由React Data Table复选框轻松解决的功能,该复选框在内部存在,可以与不确定的功能一起使用。

 

性能和缺陷的优化:

 

反应数据表组件使从其他库中合并最佳用户界面组件变得容易。这些是覆盖诸如MaterialUI之类的库中的诸如选择复选框和排序图标之类的内容所必需的。

我们知道,预优化会带来很多麻烦,但是可以遵循某些最佳实践,这些最佳实践可以确保React Data Table的性能符合您的期望水平。

 

通过非主要道具:

 

反应数据表已经进行了内部优化,可以尝试在内部的更深层组件上进行重新渲染,这完全取决于用户,以确保他或她很好地理解在道具或状态发生变化时React如何管理渲染以及JavaScript如何确定非基元的相等性。

作为一般经验法则,或者如果遇到任何与性能相关的问题,应确保每次存在渲染周期时都不会重新创建传递到React Data Table中的任何非原始道具。 。当有大型数据集将复杂的组件和列传递到React Data Table时,这一点尤为重要。

 

优化类组件:

 

这通常可以通过移动诸如功能,数组,对象和React的许多其他组件之类的道具来实现。它们被传递给方法之外的React Data Table:render。例如,在需要实现备忘录的地方,备忘录一是一个非常好的库可供使用。 

 

优化示例:

 

我们现在将看到的组件将在每次触发onSelectedRowsChange时使React Data Table完全重新呈现。这是因为当调用setState时,将触发myComponent进行重新渲染,而myComponent的设计将触发在存在的所有子组件(即DataTable)上重新渲染。但是没有什么可担心的,因为React在何时以及如何呈现DataTable时可以非常优化地处理此决定,因此,只要DataTable道具完全相同,就不应发生完全重新渲染c =。但是,列会在每次重新渲染时更改,因为它会一次又一次地创建。

这是由于质量检查是具有参考意义的事实。简单地说,columns []!== columns []。可以说,我们看到的两个列实例都包含相同的元素,但是它们是非常不同的数组。 

解决此问题的简单方法是声明一个非基本字段且在render函数之外的任何字段。这是为了确保不会在每个重新渲染周期都重新创建它。但是,只有在不需要将组件属性或方法传递给对象列时,此方法才起作用。因此,将事件处理程序附加到我们的列,而无需将其放置在渲染方法中并处理不必要的重新渲染,需要牢记两件事:

  1. 创建一个列函数以传递所需的参数。
  2. 必须记住列功能。

这样,React会检查列是否已更改列;相反,它将是缓存的结果,从而防止发生不必要的重新渲染。

要注意的是,this.updateState不需要使用任何备注。这是由于将this.updateState定义为类方法的原因,因此只能创建一次。但是,对于功能组件,这是不同的。 

 

功能组件的优化:

 

如果我们关心在React的版本大于16.8中构建任何功能组件,那么我们可以轻松获得对React Hooks的访问,例如useMemo和useCallback。 

 

结论: 

反应数据表是一个非常有趣的工具。它不仅非常易于使用,而且易于定制。在使用任何React Data Table功能之前,我们甚至可以根据需要设计用户界面。可以选择默认主题和自定义主题,这是非常令人愉悦的。 反应数据表确实使它值得花费时间,并为用户提供了很好的体验。对于React Data Table,优化的极限是无限的,但是还需要非常小心,以免破坏React Data Table。通过本文,我们希望您能够充分利用React Data Table。

 

Exit mobile version