Java编程网

分享 Java Web 开发相关知识

比较流行的React组件库

React是一个用于构建用户界面的JavaScript库。它有一个了不起的社区,它会不懈地努力来生产UI组件,以帮助加快开发过程并使我们的生活更轻松。

在本文中,我们将比较流行的React组件库,并对每个流行度,开发人员经验,可读性,文档和包大小进行评估,以帮助您为下一个React项目选择合适的库。

蚂蚁设计

Ant Design是一个完全使用TypeScript构建的UI库。它具有一组高质量的React组件,并为浏览器和服务器端渲染提供了强大的支持,因此对于快速构建React应用程序非常有用。

要查看实际使用的Ant Design,请使用以下命令之一进行安装。

  yarn add antd

要么:

 npm install antd

接下来,添加下面的代码块以创建卡组件(我们将为每个库创建卡以更轻松地对其进行比较)。

    import React from 'react';
    import { Card, CardActions, CardContent, makeStyles, Button, Typography } from '@material-ui/core';

    const MaterialUI = () => {
      const useStyles = makeStyles({
        root: {
          width: 300,
        },
        title: {
          paddingBottom: '1rem'
        }
      });

      const classes = useStyles();
      return (
    <Card className={classes.root}>
    <CardContent>
    <Typography className={classes.title} variant="h5" component="h1">
    Material UI card
    </Typography>
        <Typography variant="body2" component="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Typography>
      </CardContent>
      <CardActions>
      <Button variant="contained" color="primary">
      Read more
    </Button>
      </CardActions>
    </Card>
    ) };

    export default MaterialUI

如您在这里看到的,Ant Design提供了一个用于创建组件的强大平台。它们的名称很容易理解,而且元素可读性很强。组件也可以根据我们的设计进行定制。

让我们来看看Ant Design如何与其他React组件库相提并论:

  • 流行 – 56.4k星星GitHub上,每周超过341,000下载的NPM ; 被阿里巴巴,百度等跨国公司使用
  • 文档 -写得好并且对初学者友好;您可以复制给定组件的源代码以更好地在CodePen,CodeSandbox或StackBlitz上预览
  • 捆绑包 大小(最小 — antd 2.2mb

如您所见,Ant Design非常受欢迎,尤其是在中国,并且其文档非常全面。但是,与其他React组件库相比,捆绑包很大。

《比较流行的React组件库》

材质UI

Material-UI是最受欢迎的React UI组件库。它的灵感来自Google的Material Design并由其构建,并具有许多预构建的React组件,可以帮助您立即创建React应用。更好的是,它具有一些预先构建的主题,可用于加速开发。

要安装Material-UI,请在终端上运行以下两个命令之一。

  yarn add @material-ui/core

要么:

    npm install @material-ui/core

接下来,添加以下黑色代码,以使用Material UI创建卡片组件。

    import React from 'react';
    import { Card, CardActions, CardContent, makeStyles, Button, Typography } from '@material-ui/core';

    const MaterialUI = () => {
      const useStyles = makeStyles({
        root: {
          width: 300,
        },
        title: {
          paddingBottom: '1rem'
        }
      });

      const classes = useStyles();
      return (
    <Card className={classes.root}>
    <CardContent>
    <Typography className={classes.title} variant="h5" component="h1">
    Material UI card
    </Typography>
        <Typography variant="body2" component="p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Typography>
      </CardContent>
      <CardActions>
      <Button variant="contained" color="primary">
      Read more
    </Button>
      </CardActions>
    </Card>
    ) };

    export default MaterialUI

与Ant Design不同,Material-UI提供了用于对组件进行样式设置的内置方法。makeStyles()很有用,尤其是当您的代码开始变大时;它可以帮助您更快地找到要样式化的元素,并使代码更具可读性。缺点是可读性可能会随着组件的增长而降低。但总体而言,Material-UI是一个强大的,高度可定制的库。

  • 流行 – 54.6k星星GitHub上,每周超过100万的下载量在NPM ; 由NASA,Netflix,Amazon等公司使用。
  • 文档 -易于理解,适合初学者;您可以在文档中找到给定组件的源代码,甚至可以在CodeSandbox中对其进行编辑
  • 捆绑包大小(最小) — @ material-ui / core 314.5kB

与Ant Design相比,Material UI的捆绑包尺寸非常小。它也很受欢迎,并且拥有一个很棒的生态系统,值得您考虑下一个React项目。

React Bootstrap

对于喜欢Bootstrap的开发人员来说,React Bootstrap是一个梦想成真,因为它将Bootstrap的强大功能和简单性带给了React。它包含了许多没有第三方库的预构建的纯React组件。通常,React Bootstrap提供与Bootstrap大部分相同的功能。

在终端中运行以下命令之一以安装React Bootstrap。

    yarn add react-bootstrap bootstrap

要么:

    npm install react-bootstrap bootstrap

接下来,像以前一样,添加以下代码块以创建卡:

    import React from 'react';

    import 'bootstrap/dist/css/bootstrap.min.css';
    import { Button, Card } from 'react-bootstrap';

    const ReactBootstrap = () => (
    <Card style={{ width: 300 }}>
      <Card.Body>
        <Card.Title>React Bootstrap card</Card.Title>
        <Card.Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        </Card.Text>
        <Button variant="primary">Read more</Button>
      </Card.Body>
    </Card>
    )

    export default ReactBootstrap;

React Bootstrap将Bootstrap样式扩展到React组件。具备Bootstrap的先前经验会有所帮助,但不是必需的。该代码可读性强,组件名称易于保留。

现在获取报告卡:

React Bootstrap需要Bootstrap库作为依赖项。但是,捆束尺寸很小。如果您喜欢Bootstrap,React Bootstrap绝对是您的React应用程序要考虑的东西。

蓝图

蓝图是一个UI库,主要用于桌面应用程序,因为它针对数据密集型界面进行了优化和构建。您仍然可以使用它来构建Web应用程序,但是您将无法获得Blueprint的全部功能。

通过在终端上运行以下命令之一来安装Blueprint并创建卡。

    yarn add @blueprintjs/core

要么:

    npm install @blueprintjs/core

要创建卡组件,请添加以下代码行。

    import React from 'react';
    import "@blueprintjs/core/lib/css/blueprint.css"
    import { Button, Card, Classes } from "@blueprintjs/core";


    const Blueprint = () => (
    <Card style={{width: 300}} className={Classes.CARD}>
        <h3>Blueprint card</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
        <Button intent="primary" text="Read more" className={Classes.BUTTON} />
    </Card>
      );

    export default Blueprint;

您仍然可以在Blueprint中使用相同的组件命名约定。您还可以利用CSS实用程序对组件进行样式设置,这有助于提高代码的可读性。

现在,让我们分析Blueprint的受欢迎程度和代码质量。

  • 受欢迎程度 -GitHub上有15,000星,NPM 有超过107,000个下载
  • 文档 -文档是交互式的,您可以从docs或GitHub复制给定组件的源代码
  • 捆绑包 大小(最小) — @ blueprintjs / core 588.2kB

总体而言,Blueprint是用于构建React应用程序(尤其是具有复杂的数据密集型界面的桌面应用程序)的良好组件库。

语义UI

与Blueprint不同,Semantic UI是为制作React应用而设计的。它具有一些预先构建的主题,您可以通过安装它或通过Create React App来使用。语义UI组件也具有很高的响应速度,并具有很好的启动浏览器支持。

通过在终端上运行以下命令之一,让我们使用语义UI创建卡组件。

    yarn add semantic-ui-react semantic-ui-css

要么:

  npm install semantic-ui-react semantic-ui-css

接下来,添加以下代码块以创建卡:

    import React from 'react'

    import 'semantic-ui-css/semantic.min.css';
    import { Card, Button } from 'semantic-ui-react'

    const SemanticUI = () => ( 
      <Card style={{width: 300}}>
        <Card.Content>
          <Card.Header>Semantic UI</Card.Header>
          <Card.Description>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          </Card.Description>
          <Button primary>Read more</Button>
        </Card.Content>
      </Card>
    )

    export default SemanticUI

使用语义UI创建组件与在React Bootstrap中进行创建非常相似,除了传递道具的方式不同。该组件也是可读且易于理解的。

让我们看看语义UI的功能如何堆叠。

  • 人气 — Git ub上有10.9k颗星,NPM上有超过141,000个下载
  • 说明文件 -说明文件很棒;语义UI提供了构建组件所需的代码,您甚至可以在CodeSandbox上预览
  • 捆绑包大小(最小) – 语义UI反应312kB语义UI-CSS 272.1kB

语义UI React库需要语义UI CSS包来正确设置组件的样式。尽管这会在您的项目上增加一些KB,但是捆绑包的大小仍然很小。

常绿

如果您正在寻找具有低级,简约设计的React UI组件库,那么您将享受Evergreen。它包含几个实用程序组件,可用于构建完整的React组件,并且它比大多数库更灵活,更可自定义,非常适合企业Web应用程序。

让我们通过在终端中运行以下两个命令之一来安装Evergreen。

    yarn add evergreen-ui

要么:

    npm install evergreen-ui

接下来,创建卡组件。

    import React from 'react';
    import { Pane, Text, Button, Heading } from 'evergreen-ui'


    const Evergreen = () => (
        <Pane
        display="flex"
        alignItems="center"
        padding={16}
        justifyContent="center"
        flexDirection="column"
        border="default"
        width={300}>
        <Heading is="h1">Evergreen Card</Heading>
        <Text marginY={10}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</Text>
        <Button appearance="primary">Read more</Button>
      </Pane>

    );

    export default Evergreen;

如您所见,创建卡的方法和某些名称已更改。这就是Evergreen的工作方式;它提供了可以扩展以适合您的设计系统的简约组件。

至于规格:

  • 受欢迎程度 –在GitHub上有9.1k颗星,在NPM上有4,000多个下载,Evergreen没有像其他组件库那样被广泛使用;它是由细分市场开发和使用的
  • 文档 -文档已得到很好的解释,很容易找到给定组件的源代码
  • 捆绑包大小(最小)— evergreen-ui 751.2kB

归根结底,Evergreen是一个不错的React组件库,具有相对较小的捆绑包大小,无数的预建组件和可根据您的需求进行定制的低级设计。

反应陷阱

Reactstrap与React Bootstrap相似,除了它不依赖Bootstrap正常工作。但是,Reactstrap也将Bootstrap样式引入了React组件。

要查看运行中的Reactstrap,请运行以下命令之一。

    yarn add reactstrap

要么:

    npm install reactstrap

创建卡组件。

    import React from 'react';
    import {
      Card, CardText, CardBody,
      CardTitle, Button
    } from 'reactstrap';

    const Reactstrap = () => (
          <Card style={{width: 300}}>
            <CardBody>
              <CardTitle>Reactstrap Card</CardTitle>
              <CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</CardText>
              <Button color="primary">Read more</Button>
            </CardBody>
          </Card>
      );

    export default Reactstrap;

语法类似于React Bootstrap,但是Reactstrap使用驼峰大小写来命名组件而不是点。该代码易于理解和可读。

  • 流行度 – 8.8万个GitHub星,在NPM上下载超过256万
  • 文档 -文档已得到很好的解释,很容易找到给定组件的源代码。还包括一些可用于简化开发的预建主题
  • 捆绑包大小(最小 — reactstrap 150.4kB

Reactstrap本质上是React Bootstrap的替代方案。它们都具有相同的目的,并且束的大小相似。

温泉UI

Onsen UI与我们研究过的以前的库有些不同。由于Onsen UI的设计考虑了移动优先,因此主要用于构建跨平台的移动Web应用程序。

通过运行以下两个命令之一来安装Onsen UI。

    yarn add onsenui react-onsenui

要么:

    npm install onsenui react-onsenui

现在,使用以下代码创建卡组件。

    import React from 'react';
    import 'onsenui/css/onsenui.css';
    import 'onsenui/css/onsen-css-components.css';
    import { Card, Button } from 'react-onsenui';


    const OnsenUI = () => (
      <Card style={{width: 300}}> 
      <h3>Onsen UI card</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
        <Button modifier="cta">Read more</Button>
      </Card>
    );

    export default OnsenUI;

尽管具有移动设计,但代码与我们比较过的大多数组件库有些相似。组件和道具易于理解和命名。

Onsen UI在受欢迎程度,文档质量和捆绑包大小方面如何比较?

  • 受欢迎程度 – GitHub上有7.8k星,NPM 上有 2,000次下载,Onsen UI并未得到广泛使用
  • 文档 —与其他库相比相对较弱。尽管有一个游乐场,但未提供代码,由于缺少示例,因此很难理解组件。该文档绝对不适合初学者
  • 捆绑包大小(最小 — react-onsenui 48kB ; 温泉319.3kB

Onsen UI可以用于各种React应用程序,但是当使用移动优先方法开发React应用程序时,它确实会发光。

结论

无论您从事哪种类型的项目,都有许多UI组件库可帮助您快速轻松地制作有用的,功能丰富的React应用。大多数都是可定制的,并包括有用的预构建组件。更好的是,一些UI库提供了预构建的主题,您可以使用这些主题立即创建网站。希望这种比较将帮助您为下一个React项目选择合适的库。


全面了解生产React应用

调试React应用程序可能很困难,尤其是当用户遇到难以重现的问题时。如果您对监视和跟踪Redux状态,自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间感兴趣,请尝试LogRocket。

《比较流行的React组件库》

LogRocket就像Web应用程序的DVR,实际上记录了React应用程序上发生的所有事情。无需猜测为什么会发生问题,您可以汇总并报告问题发生时应用程序所处的状态。LogRocket还监视您的应用性能,并使用客户端CPU负载,客户端内存使用情况等指标进行报告。

LogRocket Redux中间件软件包在用户会话中增加了一层可见性。LogRocket记录Redux存储中的所有操作和状态。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注