2021 年值得关注的 5 个优秀 React 库 1. react-data-grid 2. use-editable 3. easybase-react 4. react-flow 5. Atomic Layout 结论

2025-06-08

2021 年值得关注的 5 个优秀 React 库

1.反应数据网格

2.使用可编辑

3. easybase-react

4. React-flow

5.原子布局

结论

在过去五年中，前端 JavaScript 框架变得异常流行，包括Vue、Angular和React。这些模块帮助初学者和开发人员将他们的想法变成现实。此外，他们还可以将应用程序部署到各种设备上。

让我们来看看 2021 年将会产生巨大影响的 5 个 React 库。特别是，我们将重点关注那些相对较新且在社区中取得进展的包。

享受！

1.反应数据网格

Github

npm 包大小

终于，一个 React 的 Excel 克隆版诞生了，它直观易用，而且美观大方。这并非易事，但我必须说，这个项目真的做到了。特色网格支持编辑器、键盘导航和复制粘贴。

这是一个 React-data-grid 表格的示例。看看它有多快。我猜他们使用了某种形式的虚拟化，这在这个例子中得到了充分的体现。这个应用程序非常快，而且很清晰。而且，初始化其中一个网格非常简单！

function App() {
  return (
    <DataGrid
      columns={[
        { key: 'id', name: 'ID' },
        { key: 'title', name: 'Title' }
      ]}

      rows={[
        { id: 0, title: 'Example' },
        { id: 1, title: 'Demo' }
      ]}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

2.使用可编辑

Github

npm 包大小

React 的文本编辑器有很多（尤其是在所见即所得方面）。但这个库却采用了不同的方法。首先要说的是，这个库非常小巧，所以如果它对你的项目有用，不妨看看它。这个use-editable库提供了一个小钩子，允许元素在contenteditable保持完全 React 可渲染的情况下进行编辑。这个项目的目标是消除与 DOM 交互的需求，或者innerHTML处理原生可编辑的内容。它几乎适用于所有元素！

要使用这个库，只需初始化一个 ref 到你的 React 元素，并为元素创建一个 state。之后，你只需将其传递给 useEditable hooks，如下所示：useEditable(editorRef, setRefContent)。这里有一个CodeSandbox 的演示。快来试试吧！

3. easybase-react

Github

npm 包大小

你知道我们必须自己动手！这个库让用户身份验证和数据库集成比以往任何时候都更容易。它兼容 Easybase 项目或 REACT 集成。这个useEasybase()钩子让开发人员能够访问可扩展项目所需的功能。只需将根组件包装在一个自定义的ebconfig.js：

import { EasybaseProvider, useEasybase } from "easybase-react";   
import ebconfig from "ebconfig.js";    

function App() {
    return (
        <EasybaseProvider ebconfig={ebconfig}>
            <ProjectUser />
        </EasybaseProvider>
    )
}
Enter fullscreen mode Exit fullscreen mode

从那里，您可以执行用户身份验证操作并访问有状态的数据库数组！它完全免费。如果您想了解 Easybase 和 React ，这里有更多信息。让我们简要了解一下如何使用 进行用户身份验证easybase-react：

function ProjectUser() {
  const { isUserSignedIn, signIn, signUp } = useEasybase();

  if (isUserSignedIn()) {
    return (
      <div>
        <h2>You're signed in!</h2>
        <FrameRenderer />
      </div>
    )
  } else {
    return (
      <div style={ { display: "flex", flexDirection: "column" } }>
        <h4>Username</h4>
        <input value={usernameValue} onChange={e => setUsernameValue(e.target.value)} />
        <h4>Password</h4>
        <input type="password" value={passwordValue} onChange={e => setPasswordValue(e.target.value)} />

        <button onClick={_ => signIn(usernameValue, passwordValue)}>
          Sign In
        </button>
        <button onClick={_ => signUp(usernameValue, passwordValue)}>
          Sign Up
        </button>
      </div>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

4. React-flow

Github

npm 包大小

这款软件包以其悠久的历史而闻名。它的主要功能是构建基于节点的交互式编辑器、流程图和图表。开发人员专注于功能性和可定制性的良好结合。

该软件包实现了其目标，即轻松实现基于节点的自定义节点类型的图表。此外，它还附带组件（迷你地图、图表控件等）。欢迎查看示例或阅读博客文章以开始使用。

请查看此处的示例。这个库似乎涵盖了许多开发人员在流程图可视化方面的用例。它速度很快，响应也很快！

5.原子布局

Github

npm 包大小

注意该项目的对等依赖关系

令人惊讶的是，这是我们列表中唯一的布局库（尽管感觉好像有数百万个），这是有原因的。我个人不太喜欢布局库，因为flexbox的功能，但这个包可能会改变我将来构建项目的方式。事实证明，atomic-layout它处理的不仅仅是间距。

考虑到设备的可扩展性，处理合理的分布和间距通常非常困难。原子布局通过引入一个称为 Composition 的专用间距层来帮助您组合元素。它鼓励您将 UI 元素的视觉外观和它们之间的间距分开考虑。我们来看下面这个简单的例子：

const areasMobile = `
  thumbnail
  header
  footer
`
const areasTablet = `
  thumbnail header
  thumbnail footer
`

const Card = ({ title, imageUrl, actions }) => (
  <Composition areas={areasMobile} areasMd={areasTablet}>
    {({ Thumbnail, Header, Footer }) => (
      <React.Fragment>
        <Thumbnail>
          <img src={imageUrl} alt={title} />
        </Thumbnail>
        <Header as="h3">{title}</Header>
        <Footer padding={10} paddingMd={20}>
          {actions}
        </Footer>
      </React.Fragment>
    )}
  </Composition>
)
Enter fullscreen mode Exit fullscreen mode

该Composition元素允许开发者根据用户设备的尺寸来定制他们的 React 组件。这比有条件地渲染组件的每个属性要简洁得多。请查看一个更详细的示例，了解这个库的真正威力。

结论

非常感谢你的阅读！如果你有任何问题或疑虑，欢迎留言，我一定会回复你。

鏂囩珷鏉ユ簮锛�https://dev.to/d1020/5-great-react-libraries-to-look-out-for-in-2021-4g23
Devto 翻译
PREV
我使用自己的应用程序一个月了，以下是我学到的东西
NEXT
Entenendo Plugs em Elixir 简介 结论