15 个你应该知道的 React 库

在现代网页开发的世界中，React 作为一个构建用户界面的强大且多功能的库脱颖而出。React 由 Meta（前身为 Facebook）开发，深受开发者欢迎，并广泛应用于各种应用程序中。

React 是一个免费且开源的前端 JavaScript 库，它简化了构建动态和交互式用户界面的过程。它采用组件化架构，允许开发人员创建可重复使用的 UI 组件，这些组件可以组合在一起以构建复杂的应用程序。

React 在流行网站和 web 应用程序的开发中被广泛使用，包括：

• Facebook
• Instagram
• Netflix
• Airbnb
• Twitter
• WhatsApp Web
• Pinterest
• Twitch

在编程中，库是指开发者可以利用的一系列预写代码的集合，用以简化和加速他们的编程任务。这些库提供了可重复使用的功能，可以集成到不同的应用程序中，从而减少开发时间和精力。

Liberary 可以帮助你减少编码和努力。

    npm i axios

Axios 是一个基于承诺的简单 HTTP 客户端，适用于浏览器和 node.js。Axios 提供了一个易于使用的库，体积小巧，接口非常可扩展。

    async function 获取用户() {  
      try {  
        const response = await axios.get('/user?ID=12345');  
        console.log(response);  
      } catch (error) {  
        console.error(error);  
      }  
    }

我们可以使用 Axios 而不是 Fetch，通过 Axios 库调用 API 来减少代码行数。

Formik 是一个免费、开源的库，它帮助在 React 应用程序中构建和处理表单数据。它提供了一个简单的 API 和内置验证，使得收集和操作输入数据变得简单。Formik 被 Airbnb、Walmart、Lyft 和 Stripe 等公司使用。

    npm i formik

    import React from 'react';  
    import { Formik, Form, Field, ErrorMessage } from 'formik';  

    const initialValues = {  
      firstName: '',  
      lastName: '',  
      email: '',  
    };  

    const onSubmit = (values) => {  
      console.log(values);  
    };  

    const validate = (values) => {  
      const errors = {};  

      if (!values.firstName) {  
        errors.firstName = '必填';  
      }  

      if (!values.lastName) {  
        errors.lastName = '必填';  
      }  

      if (!values.email) {  
        errors.email = '必填';  
      } else if (!/^\S+@\S+\.\S+$/.test(values.email)) {  
        errors.email = '无效的电子邮件地址';  
      }  

      return errors;  
    };  

    const SampleForm = () => {  
      return (  
        <div>  
          <h1>示例表单</h1>  
          <Formik  
            initialValues={initialValues}  
            onSubmit={onSubmit}  
            validate={validate}  
          >  
            {({ isSubmitting }) => (  
              <Form>  
                <div>  
                  <label htmlFor="firstName">名字:</label>  
                  <Field type="text" id="firstName" name="firstName" />  
                  <ErrorMessage name="firstName" component="div" />  
                </div>  

                <div>  
                  <label htmlFor="lastName">姓氏:</label>  
                  <Field type="text" id="lastName" name="lastName" />  
                  <ErrorMessage name="lastName" component="div" />  
                </div>  

                <div>  
                  <label htmlFor="email">电子邮件:</label>  
                  <Field type="email" id="email" name="email" />  
                  <ErrorMessage name="email" component="div" />  
                </div>  

                <button type="submit" disabled={isSubmitting}>  
                  提交  
                </button>  
              </Form>  
            )}  
          </Formik>  
        </div>  
      );  
    };  

    export default SampleForm;

Formik 通过提供一个直观的 API 来管理表单状态和验证逻辑，简化了 React 应用中的表单验证。

例如，React Helmet 可以用来动态设置文档的标题、描述和元标签。这在你需要更新元标签以优化 SEO 时非常有用。React Helmet 支持所有有效的 head 标签，包括 title、style、base、meta、link、script 和 NoScript。

    npm i react-helmet

    import React from "react";  
    import {Helmet} from "react-helmet";  

    class Application extends React.Component {  
      render () {  
        return (  
            <div className="application">  
                <Helmet>  
                    <meta charSet="utf-8" />  
                    <title>我的标题</title>  
                    <link rel="canonical" href="http://mysite.com/example" />  
                </Helmet>  
                ...  
            </div>  
        );  
      }  
    };

React Helmet 可以帮助你通过更方便地设置和更新搜索引擎用来索引和排名你页面的元标签，来提高你网站的 SEO。通过提供关于你内容的准确和最新的信息，你可以帮助搜索引擎更好地理解你的网站，并提高你在搜索结果中的排名。

React Helmet 还可以帮助你通过更轻松地设置和更新社交媒体平台用于显示你网站内容时使用的元标签，来增强你网站在社交媒体上的分享。

Redux 是一个用于可预测和易于维护的全局状态管理的 JS 库。

    npm i react-redux

React-Redux 基本示例

    import React from 'react';  
    import { createStore } from 'redux';  
    import { Provider, connect } from 'react-redux';  

    // 定义初始状态  
    const initialState = {  
      count: 0  
    };  

    // 定义 reducer 函数  
    const reducer = (state = initialState, action) => {  
      switch (action.type) {  
        case 'INCREMENT':  
          return {  
            ...state,  
            count: state.count + 1  
          };  
        case 'DECREMENT':  
          return {  
            ...state,  
            count: state.count - 1  
          };  
        default:  
          return state;  
      }  
    };  

    // 创建 Redux store  
    const store = createStore(reducer);  

    // 定义 action 创建函数  
    const increment = () => ({ type: 'INCREMENT' });  
    const decrement = () => ({ type: 'DECREMENT' });  

    // Counter 组件  
    const Counter = ({ count, increment, decrement }) => {  
      return (  
        <div>  
          <h1>计数器: {count}</h1>  
          <button onClick={increment}>增加</button>  
          <button onClick={decrement}>减少</button>  
        </div>  
      );  
    };  

    // 将 Counter 组件连接到 Redux store  
    const ConnectedCounter = connect(  
      state => ({ count: state.count }),  
      { increment, decrement }  
    )(Counter);  

    // App 组件  
    const App = () => {  
      return (  
        <Provider store={store}>  
          <ConnectedCounter />  
        </Provider>  
      );  
    };  

    export default App;

你的整个应用的全局状态都存储在一个单一的 store 对象树中。改变状态树的唯一方式是创建一个描述发生了什么的 action 对象，并将其 dispatch 到 store。为了指定状态如何响应 action 而更新，你需要编写纯 reducer 函数，这些函数根据旧状态和 action 计算出新的状态。

    npm i react-router-dom

React Router DOM 常用于使用 React 构建的 web 应用程序中的路由和导航管理。它通过提供一个 API 来定义、导航和渲染路由，从而简化了路由过程。

    import * as React from "react";  
    import * as ReactDOM from "react-dom/client";  
    import {  
      createBrowserRouter,  
      RouterProvider,  
    } from "react-router-dom";  
    import "./index.css";  

    const router = createBrowserRouter([  
      {  
        path: "/",  
        element: <div>你好，世界！</div>,  
      },  
    ]);  

    ReactDOM.createRoot(document.getElementById("root")).render(  
      <React.StrictMode>  
        <RouterProvider router={router} />  
      </React.StrictMode>  
    );

React Router 的主要优势在于，点击另一个页面的链接时，页面无需刷新。

    npm install dotenv --save

Dotenv 是一个零依赖模块，它从 .env 文件中加载环境变量到 [process.env](https://nodejs.org/docs/latest/api/process.html#process_process_env)。通过将配置存储在代码库之外的环境中，可以保护那些需要保密的密钥和信息，如密码和密钥。

    import React, { useEffect, useState } from 'react';  
    require('dotenv').config();  

    const App = () => {  
      const [data, setData] = useState(null);  

      useEffect(() => {  
        // 使用环境变量从 API 获取数据  
        fetch(process.env.REACT_APP_API_URL)  
          .then(response => response.json())  
          .then(data => setData(data))  
          .catch(error => console.error('获取数据时出错:', error));  
      }, []);  

      return (  
        <div>  
          <h1>来自 API 的数据</h1>  
          {data ? (  
            <pre>{JSON.stringify(data, null, 2)}</pre>  
          ) : (  
            <p>加载中...</p>  
          )}  
        </div>  
      );  
    };  

    export default App;

    npm i eslint

ESLint 是一个流行的开源 JavaScript 代码检查工具。它分析你的代码以查找潜在的错误，强制执行编码标准，并提高代码质量。ESLint 还可以帮助你作为开发者识别和修复常见错误，使用最佳实践，并保持代码库的一致性。

基本示例

    import js from "@eslint/js";  

    export default [  
        js.configs.recommended,  

       {  
           rules: {  
               "no-unused-vars": "warn",  
               "no-undef": "warn"  
           }  
       }  
    ];

    import React from 'react';  
    import Header from './components/Header';  
    const App = () => {  
        return (  
            <div>  
                <Header />  
            </div>  
        );  
    };  
    export default App;

如你所见，我们只想渲染那个组件。但如果我们在该文件上运行 eslint，将会得到几个错误。

    1:8  warning  'React' 被定义但从未使用   no-unused-vars  
    2:8  warning  'Header' 被定义但从未使用  no-unused-vars

    npm i date-fns

date-fns 提供了最全面、简单且一致的工具集，用于在浏览器和 Node.js 中操作 JavaScript 日期。

    // 解析日期字符串  
    const date = dateFns.parse('2023-08-04');  

    // 格式化日期  
    const formattedDate = dateFns.format(date, 'MM/dd/yyyy');  

    // 比较两个日期是否相等  
    const areDatesEqual = dateFns.isEqual(date1, date2);  

    // 计算两个日期之间的差值  
    const differenceInDays = dateFns.differenceInDays(date1, date2);

date-fns 是一个功能强大且用途广泛的 JavaScript 日期和时间处理库。它适用于各种规模的项目。

    npm install react-error-boundary

错误边界是 React 组件，它们可以捕获其子组件树中的任何 JavaScript 错误，记录这些错误，并显示备用 UI 而不是导致崩溃的组件树。

该组件支持几种渲染备用内容的方式（如下所示）。

     "use client";  

    import { ErrorBoundary } from "react-error-boundary";  

    function fallbackRender({ error, resetErrorBoundary }) {  
      // 调用 resetErrorBoundary() 以重置错误边界并重试渲染。  

      return (  
        <div role="alert">  
          <p>发生了一些错误:</p>  
          <pre style={{ color: "red" }}>{error.message}</pre>  
        </div>  
      );  
    }  

    <ErrorBoundary  
      fallbackRender={fallbackRender}  
      onReset={(details) => {  
        // 重置应用的状态，以防止错误再次发生  
      }}  
    >  
      <ExampleApplication />  
    </ErrorBoundary>;

用 ErrorBoundary 组件包裹其他 React 组件，以“捕获”错误并渲染备用 UI（备用 UI 是在实际 UI 尚未加载完成时临时渲染的界面）。

    npm install sweetalert --save

SweetAlert 是一个 JavaScript 库，为网页应用提供了替代的警告和模态对话框。它可以替代内置的警告功能，并改进默认浏览器对话框的用户界面。

    import React from 'react';  
    import Swal from 'sweetalert';  

    const SweetAlertExample = () => {  
      const handleClick = () => {  
        Swal.fire({  
          title: '你好！',  
          text: '这是一个 SweetAlert 对话框。',  
          icon: 'success',  
          confirmButtonText: '确定'  
        });  
      };  

      return (  
        <div>  
          <h1>SweetAlert 示例</h1>  
          <button onClick={handleClick}>显示 SweetAlert</button>  
        </div>  
      );  
    };  

    export default SweetAlertExample;

    npm i styled-components

styled-components 是一个开源库，允许 React 和 React Native 开发者在同一个文件位置定义 UI 组件和样式。它使用 JavaScript 中的 CSS（JS 中的 CSS），允许开发者直接在 JavaScript 文件中编写 CSS 代码。

    import React from 'react';  

    import styled from 'styled-components';  

    // 创建一个 <Title> React 组件，渲染一个居中、淡紫红色且大小为 1.5em 的 <h1>  
    const Title = styled.h1`  
      font-size: 1.5em;  
      text-align: center;  
      color: palevioletred;  
    `;  

    // 创建一个 <Wrapper> React 组件，渲染一个带有填充和番木瓜色背景的 <section>  
    const Wrapper = styled.section`  
      padding: 4em;  
      background: papayawhip;  
    `;  

    function MyUI() {  
      return (  
        // 就像使用任何其他 React 组件一样使用它们——除了它们是带样式的！  
        <Wrapper>  
          <Title>你好，世界，这是我的第一个带样式的组件！</Title>  
        </Wrapper>  
      );  
    }

    npm install react-tooltip

react-tooltip 包提供了一个 <Tooltip/> 组件，可以绑定到一个锚元素，并用于显示特定元素的信息。

    import React from 'react';  
    import ReactTooltip from 'react-tooltip';  

    const TooltipExample = () => {  
      return (  
        <div>  
          <h1>React Tooltip 示例</h1>  
          <button data-tip="你好，我是 tooltip！" data-for="tooltip">悬停我</button>  
          <ReactTooltip id="tooltip" place="bottom" effect="solid" />  
        </div>  
      );  
    };  

    export default TooltipExample;

    npm install --save react-spinners

react-spinner-loader 提供了一个简单的 React SVG 加载动画组件，可以在数据加载到视图之前用于异步操作。

    import React from 'react';  
    import { css } from '@emotion/react';  
    import { RingLoader } from 'react-spinners';  

    const override = css`  
      display: block;  
      margin: 0 auto;  
      border-color: red;  
    `;  

    const SpinnerExample = () => {  
      return (  
        <div className="sweet-loading">  
          <RingLoader color={'#123abc'} css={override} size={150} loading={true} />  
        </div>  
      );  
    };  

    export default SpinnerExample;

    npm i yup

Yup 是一个用于运行时值解析和验证的模式构建器。定义一个模式，转换一个值以匹配该模式，断言现有值的形状，或者两者兼而有之。Yup，模式非常具有表现力，可以用于建模复杂的、相互依赖的验证或值转换。

    import * as yup from 'yup';  

    const personSchema = yup.object({  
      firstName: yup.string().defined(),  
      nickName: yup.string().default('').nullable(),  
      sex: yup  
        .mixed()  
        .oneOf(['male', 'female', 'other'] as const)  
        .defined(),  
      email: yup.string().nullable().email(),  
      birthDate: yup.date().nullable().min(new Date(1900, 0, 1)),  
    });

    npm install --save-dev @testing-library/jest-dom

@testing-library/jest-dom 是一个提供自定义匹配器的库，用于测试 DOM 的状态。它是 Jest 测试框架的一个扩展，可以对 DOM 元素、属性和内容进行断言。

    <button data-testid="button" type="submit" disabled>提交</button>  
    <fieldset disabled><input type="text" data-testid="input" /></fieldset>  
    <a href="..." disabled>链接</a>

    expect(getByTestId('button')).toBeDisabled()  
    expect(getByTestId('input')).toBeDisabled()  
    expect(getByText('link')).not.toBeDisabled()

通过利用这些库，开发人员可以增强React应用程序的功能、性能和用户体验，同时减少开发时间和精力。

总的来说，这一全面的概述为React开发可用的工具和库生态系统提供了宝贵的见解，使开发人员能够有效地构建强大且功能丰富的应用程序。