灏天阁

分享 7 个让你的 React 项目变得更好的库

· Yin灏

当今互联网技术发展迅速，越来越多的 Web 应用需要提供流畅、高效、优美的用户体验。为了实现这一目标，前端开发人员需要掌握各种技术和工具。在这些技术和工具中，React 作为一款流行的 JavaScript 库，得到了广泛的应用和认可。而 React 生态圈中的第三方库和组件，则进一步丰富了开发者的工具箱，使得开发更加高效、便捷。

1. React Joyride

React Joyride 用于为 Web 应用程序添加用户引导和交互式教程。它可以帮助您为用户提供一种直观和有趣的方式，引导他们了解您的应用程序的各个部分以及如何使用它们。

这是一种令人难以置信的工具，可以向现有用户展示新功能。

以下是 React Joyride 的使用示例：

1、安装 React Joyride

npm install react-joyride --save

2、引入 React Joyride 组件

import Joyride from 'react-joyride';

3、定义步骤

const steps = [
  {
    target: ".my-element",
    content: "This is my element",
  },
  {
    target: ".my-other-element",
    content: "This is my other element",
  },
];

4、渲染 Joyride 组件

在您的组件中，渲染 Joyride 组件，并将步骤和其他属性作为属性传递：

<Joyride steps="{steps}" />

5、启动 Joyride

当您的组件加载时，Joyride 不会自动启动。您需要调用 Joyride 组件的 start()方法，以启动用户引导：

<Joyride steps={steps} ref={c => (this.joyride = c)} />
...
componentDidMount() {
  this.joyride.start();
}

以上是 React Joyride 的一个简单示例。您可以在其文档中找到更多使用示例和选项。

  • 网站：https://react-joyride.com/

  • NPM：https://www.npmjs.com/package/react-joyride

2. React PDF Renderer

React PDF Renderer 是一个基于 React 的 PDF 渲染库，它允许你使用 React 组件来创建和渲染 PDF 文档。@react-pdf/renderer 提供了一些组件，如 View、Text、Image 等，这些组件和 React Native 中的组件类似，你可以使用这些组件来组合并渲染 PDF 页面。

下面是一些@react-pdf/renderer 库的使用场景和使用示例：

生成可打印的 PDF 报告

@react-pdf/renderer 可以用于生成各种类型的 PDF 报告，如财务报告、销售报告、客户报告等。你可以使用 View、Text 等组件来构建你的报告页面，最后将这些页面组合在一起，使用 @react-pdf/renderer 提供的 API 将其渲染成 PDF 文件。以下是一个简单的示例：

import React from "react";
import { Document, Page, Text, View } from "@react-pdf/renderer";

const MyDocument = () => (
  <Document>
    <Page>
      <View>
        <Text>Hello, world!</Text>
      </View>
    </Page>
  </Document>
);

export default MyDocument;
  • 网站：https://react-pdf.org/
  • NPM：https://www.npmjs.com/package/@react-pdf/renderer

3. React Beautiful DnD

react-beautiful-dnd 是一个基于 React 的轻量级拖放库，它提供了一个易于使用的 API，可以轻松地实现拖放功能。你可以使用 react-beautiful-dnd 来实现各种拖放功能，如列表重排、可拖动的面板、可拖动的表格行等等。

下面是  react-beautiful-dnd 库的使用场景和使用示例：

react-beautiful-dnd 可以用于实现可重排列表，如可拖动的任务列表、可拖动的购物车等等。以下是一个简单的示例：

import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const items = [
  { id: "1", content: "Item 1" },
  { id: "2", content: "Item 2" },
  { id: "3", content: "Item 3" },
];

const App = () => {
  const [stateItems, setStateItems] = useState(items);

  const onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    const newItems = Array.from(stateItems);
    const [reorderedItem] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, reorderedItem);

    setStateItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="list">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {stateItems.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <li
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    ref={provided.innerRef}
                  >
                    {item.content}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default App;

以上是 react-beautiful-dnd 库的一些使用场景和使用示例。使用 react-beautiful-dnd 库可以使你的应用程序更具互动性和可操作性。

  • 网站：https://react-beautiful-dnd.netlify.app/

  • NPM：https://www.npmjs.com/package/react-beautiful-dnd

4. Material UI

这是一个 React UI 框架，提供了大量的组件和样式，可以用于构建 Web 应用程序的前端界面。它是 Material Design 设计语言的实现，具有可定制性和响应式设计等特点，适用于构建从简单的单页应用到复杂的企业级应用程序等多种场景。

以下是使用 material UI 构建一个简单表单的示例代码：

import * as React from "react";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";

const FormBox = styled(Box)({
  display: "flex",
  flexDirection: "column",
  gap: "16px",
});

export default function App() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      name: data.get("name"),
      email: data.get("email"),
      password: data.get("password"),
    });
  };

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <form onSubmit={handleSubmit}>
        <FormBox>
          <TextField required name="name" label="Name" />
          <TextField required type="email" name="email" label="Email" />
          <TextField
            required
            type="password"
            name="password"
            label="Password"
          />
          <Button variant="contained" type="submit">
            Submit
          </Button>
        </FormBox>
      </form>
    </Box>
  );
}

在这个示例中，我们引入了 TextField 和 Button 组件，这些组件可以直接从 @mui/material 中导入。然后，我们使用 styled 函数对 Box 组件进行了样式定制，定义了一个 FormBox 组件来包裹表单控件。在 App 组件中，我们定义了一个 handleSubmit 函数，用于处理表单提交事件，最后使用 Box 组件进行布局。

除此之外，material UI 还提供了大量的组件和工具，例如 AppBar、Drawer、Dialog、Table、Grid、Typography 等等，可以通过 import 语句导入并在应用程序中使用。另外，material UI 还提供了大量的主题和样式定制选项，可以满足不同的设计需求。

  • 网站：https://material-ui.com/
  • NPM：https://www.npmjs.com/package/@mui/material

5. Swiper.js

Swiper.js，顾名思义，是一个库，帮助您在 React 应用程序中创建可滑动的界面，可以很方便地将 Swiper 集成到 React 应用中，使用起来非常简单。

Swiper 适用于任何需要展示图片或其他类型的轮播内容的场景，例如：

  • 网站首页的广告轮播
  • 商品详情页面的图片展示
  • 艺术作品展示页面的幻灯片
  • 新闻文章的图集展示

下面是一个基本的使用示例：

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";

function App() {
  return (
    <Swiper>
      <SwiperSlide>
        <img src="image1.jpg" alt="image1" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="image2.jpg" alt="image2" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="image3.jpg" alt="image3" />
      </SwiperSlide>
    </Swiper>
  );
}

在这个示例中，我们首先引入了 Swiper 的 React 组件和样式文件。然后创建了一个 Swiper 组件，并在其中添加了三个 SwiperSlide 组件。每个 SwiperSlide 中包含一个图片元素，展示了不同的图片。

Swiper 还提供了很多其他的选项和自定义功能，可以根据需要进行配置和使用。例如，可以设置自动播放、添加导航按钮、设置轮播速度等。

  • 网站：https://swiperjs.com/react

  • NPM：https://www.npmjs.com/package/swiper

6. React Query

React Query，提供了一种方便的方式来管理 React 应用程序中的数据。它是基于 Query 体系结构，提供了一系列功能强大的工具来处理数据获取、缓存、更新等相关问题。

使用场景：

  • 数据获取和管理：通过 React Query，您可以轻松地获取和管理应用程序中的数据，不必编写大量的手动逻辑代码。
  • 优化性能：React Query 提供了许多有用的优化功能，如数据缓存、分页加载、异步数据获取等，可以大大提高应用程序的性能。
  • 实时数据更新：React Query 还支持实时数据更新，您可以使用它来订阅实时数据更改，以及使用缓存和乐观更新来提高性能和响应速度。

使用示例：

1、基本使用

import { useQuery } from "@tanstack/react-query";

function App() {
  const { isLoading, error, data } = useQuery("todos", () =>
    fetch("https://jsonplaceholder.typicode.com/todos").then((res) =>
      res.json()
    )
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

这里使用 useQuery 钩子来获取 todos 数据。如果数据正在加载，则显示 Loading…；如果发生错误，则显示错误消息；否则，显示获取到的数据。

2、使用缓存

import { useQuery, queryCache } from "@tanstack/react-query";

function App() {
  const [userId, setUserId] = useState(1);
  const { isLoading, error, data } = useQuery(
    ["todos", userId],
    () =>
      fetch(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`).then(
        (res) => res.json()
      ),
    { cacheTime: 60000 }
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <button onClick={() => setUserId((userId) => userId + 1)}>
        Next user
      </button>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

这里使用了带有缓存的 useQuery 钩子，使用了查询键来表示 userId。当用户更改时，数据将从服务器重新获取，并存储在缓存中，以便下一次使用。

3、实时数据更新

这是一个使用 React Query 和 Axios 来实时获取和更新数据的例子。

首先，在 App.js 中，我们导入 useQuery 和 useMutation hooks，以及 axios 库，然后定义一个 fetchUser 函数来获取用户数据：

import { useQuery, useMutation } from "react-query";
import axios from "axios";

const fetchUser = async () => {
  const res = await axios.get("/api/user");
  return res.data;
};

function App() {
  // useQuery hook to get user data
  const { data: user, isLoading, isError } = useQuery("user", fetchUser);

  // useMutation hook to update user data
  const [updateUser] = useMutation(async (updatedUser) => {
    const res = await axios.put("/api/user", updatedUser);
    return res.data;
  });

  // handler for updating user data
  const handleUpdateUser = (e) => {
    const { name, value } = e.target;
    updateUser({ ...user, [name]: value });
  };

  // render user data and update form
  return (
    <div>
      {isLoading ? (
        <div>Loading...</div>
      ) : isError ? (
        <div>Error loading data.</div>
      ) : (
        <div>
          <h1>User Data</h1>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
          <form>
            <label>
              Name:
              <input
                type="text"
                name="name"
                value={user.name}
                onChange={handleUpdateUser}
              />
            </label>
            <label>
              Email:
              <input
                type="email"
                name="email"
                value={user.email}
                onChange={handleUpdateUser}
              />
            </label>
          </form>
        </div>
      )}
    </div>
  );
}

然后，我们可以在服务器端创建一个 API 来获取和更新用户数据。这里我们使用 Express.js：

const express = require("express");
const bodyParser = require("body-parser");
const app = express();

app.use(bodyParser.json());

let user = {
  name: "John",
  email: "john@example.com",
};

// GET /api/user route to get user data
app.get("/api/user", (req, res) => {
  res.send(user);
});

// PUT /api/user route to update user data
app.put("/api/user", (req, res) => {
  user = req.body;
  res.send(user);
});

app.listen(5000, () => console.log("Server started on port 5000"));

在这个例子中，我们使用了 useQuery hook 来获取用户数据，并使用 useMutation hook 来更新用户数据。我们还定义了一个 handleUpdateUser 函数，它会在表单数据发生变化时被调用，并通过 updateUser 函数来更新用户数据。当用户数据更新成功后，React Query 会自动更新 user 数据并重新渲染组件，从而实现实时数据更新的效果。

  • 网站：https://tanstack.com/query/latest/

  • NPM：https://www.npmjs.com/package/@tanstack/react-query

7. React Spring

React Spring 是一个用于构建高性能动画效果的 JavaScript 库，它基于 React，可以让你轻松创建流畅、有趣和自然的交互式用户界面。

使用场景

React Spring 可以用于多种场景，包括但不限于：

  • 页面过渡效果：在页面之间进行平滑的过渡动画。
  • 滚动效果：在滚动时为页面元素添加自然的视觉效果。
  • 拖拽和手势交互：为用户的拖拽和手势操作添加流畅的动画效果。
  • 组件动画：为 React 组件添加动画效果，比如 Modal 弹框出现时的动画效果。

使用示例

渐变动画

渐变动画是一种常用的动画效果，通过改变颜色的值来实现。

import { useState } from "react";
import { useSpring, animated } from "react-spring";

function App() {
  const [hover, setHover] = useState(false);
  const props = useSpring({ color: hover ? "red" : "blue" });

  return (
    <animated.div
      onMouseOver={() => setHover(true)}
      onMouseOut={() => setHover(false)}
      style={props}
    >
      Hello, world!
    </animated.div>
  );
}

在这个例子中，通过 useSpring 钩子函数创建了一个动画对象 props，并将其应用到了 animated.div 组件的 style 属性上。当鼠标经过 animated.div 组件时，组件的颜色值将会逐渐变为红色，出现一个渐变动画的过渡效果。

  • 网站：https://react-spring.io/

  • NPM：https://www.npmjs.com/package/react-spring

结束

以上七个库各自有着独特的功能和特点，可以解决我们在前端开发中的不同需求。本文中对每个库进行了简要的介绍，并提供了相应的使用示例。当然，这些库也只是 React 生态系统中的冰山一角，我们还可以根据实际需求去寻找更适合自己的库。

- Book Lists -