2021 年你應該嘗試的 8 個 React 庫

翻譯自：Mohit

原文：https://medium.com/javascript-in-plain-english/8-powerful-react-libraries-to-try-in-2021-8ede57b422bf

使用正確的庫來優化項目工作流程

注意: 所有的庫都有超過10,000顆Github星

1. react-select

一個厲害的，強大的表單下拉選擇框的庫

代表了一種開發功能強大的 react.js 組件的全新方式，這些組件在完全可定製的同時開箱即用。

突出的功能特性

• 靈活的數據處理方法，具有可定製的功能。
• 靈活結合 emotion 這個庫(一個 css in js 的強大的庫 ).
• 組件注入API，用於完全控制UI行爲。
• 選項組、portal 支持、動畫等。

安裝:

npm i react-select

示例代碼：

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select options={options} />
)

2. react-dnd

React 的拖拽包

一個強大的工具包，能夠做出豐富的拖拽頁面應用，而且代碼具有解耦性。

突出的功能

• 非常適合Trello（一個管理任務的工具）和Storify 等應用程序，其中拖動負責在應用程序的不同部分之間傳輸數據。
• 建立在HTML5拖放API之上。

安裝:

npm i react-dnd

示例代碼：

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

/**
 * Your Component
 */
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag({
    item: { type: ItemTypes.CARD, text },
    collect: (monitor) => ({
      opacity: monitor.isDragging() ? 0.5 : 1
    })
  })
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

3. react-content-loader

基於 SVG 的強大的組件庫，可以輕易地創造骨架式的 加載頁面（loading）（有點像 Facebook 的卡片加載)

突出的功能

• 很多插件: 有許多預設可供使用。
• DIY: 您可以使用create-content-loader輕鬆創建自己的加載程序。
• React Native 支持: 具有相同強大功能的相同API。
• 輕易: 包小於 2KB and 零依賴

安裝:

npm i react-content-loader

示例代碼：

import React from "react"
import ContentLoader from "react-content-loader"

const MyLoader = (props) => (
  <ContentLoader 
    speed={2}
    width={400}
    height={160}
    viewBox="0 0 400 160"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    {...props}
  >
    <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
    <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
    <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
    <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
    <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
    <circle cx="20" cy="20" r="20" />
  </ContentLoader>
)

export default MyLoader

4. antd

企業級用戶界面設計語言和React UI庫。

突出的功能

• 使用 TypeScript 編寫
• 一整套設計資源和開發工具。
• 每個細節都有強大的主題定製。

安裝:

npm i antd

示例代碼：

import { useRequest } from 'umi';
import { queryProductList } from '@/services/product';

export default function useProductList(params: { pageSize: number; current: number }) {
  const msg = useRequest(() => queryUserList(params));

  const deleteProducts = async (id: string) => {
    try {
      await removeProducts(id);
      message.success('success');
      msg.run();
    } catch (error) {
      message.error('fail');
    }
  };

  return {
    dataSource: msg.data,
    reload: msg.run,
    loading: msg.loading,
    deleteProducts,
  };
}

5. gatsby-image

使用 React構建快速、現代的應用程序和網站

突出的功能

• 以極低代價託管: Gatsby站點不需要服務器，因此您可以以服務器呈現站點的一小部分成本在CDN上託管整個站點。
• 從任何地方定位數據: 從任何數據源 (Markdown文件，像Contentful或WordPress和REST API這樣的無頭CMS) 中提取數據。
• 超越靜態站點: 無任何限制的靜態網站的好處。

安裝:

npm i gatsby-image

示例代碼：

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

6. react-helmet

可重用的 React 組件將管理您對文檔頭的所有更改。

採用純HTML標籤並輸出純HTML標籤，非常簡單，對 React 支持得很好。

特性

• 支持所有有效標籤: title, base, meta, link, 等。
• 支持服務器端渲染。
• 嵌套組件覆蓋重複的head更改。

安裝:

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>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

7. react-virtualized

這提供了一個 React 組件來有效地呈現大列表和表格數據，由5個主要組件組成(Grid, List, Table, Masonry, Collection)

突出的功能

• 由於限制了要渲染的調用次數，因此提高了性能。
• 提供很多 HOC 組件，例如 (AutoSizer, MultiGrid, etc)

安裝:

npm i react-virtualized

示例代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import {Column, Table} from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// Table data as an array of objects
const list = [
  {name: 'Brian Vaughn', description: 'Software engineer'},
  // And so on...
];

// Render your table
ReactDOM.render(
  <Table
    width={300}
    height={300}
    headerHeight={20}
    rowHeight={30}
    rowCount={list.length}
    rowGetter={({index}) => list[index]}>
    <Column label="Name" dataKey="name" width={100} />
    <Column width={200} label="Description" dataKey="description" />
  </Table>,
  document.getElementById('example'),
);

8. react-threesixty

使用 React 360有助於創造迷人的360虛擬現實體驗，該體驗延伸到臺式機、手機和虛擬現實設備。

突出的功能

• 簡化了複雜360和VR用戶界面的創建。

安裝:

npm i react-threesixty

示例代碼：

<ThreeSixtyViewer
  image: 'images/example.jpg'
  count: 19
  perRow: 4
/>

9. 其他精彩文章

• 2021 年寫 JavaScript 代碼的 17 個優化技巧

• 使用 Node, Sequelize, Postgres 和 Docker 搭建 CURD API【譯】

• 5 個你會在 2021 年的 React 項目中用到的庫

• 【分享】每個 Web 開發者在 2021 年必須擁有 15 個 VSCode 擴展

• 【分享】73 個提高生產力的很棒的 NPM 包【譯】