React在過去幾年變得越來越受歡迎。隨之而來的是越來越多的庫的發布，給我們帶來了新的可能性，但最重要的是讓開發這工作變得越來越簡單。

在本文中，介紹 5 個 React 庫，希望能給你帶來一些幫助。

1. react-portal

我認為React中的 Portals(傳送門) 對大多數人來說都很熟悉，即使它們很少被使用。下面是 Reac t文檔中對它們的描述：

通常，我們的整個 React 應用程序都是在HTML中的一個 DOM 節點中渲染的。但是通過portals，我們可以定義附加的節點，在這些節點上我們可以掛載應用程序的各個部分，例如單個獨立的組件。

然而，在官方文檔中，門戶以一種相當麻煩和復雜的方式進行描述，這就是也 react-portal 出現的一個原因。

現在是 react-portal 用法：

import { Portal } from ‘react-portal’ 
<Portal node={document && document.getElementById(‘portal’)}> 
  <p>This is portaled into the portal div!</p> 
</Portal> 

只需使用 選擇器(如getElementById)將HTML代碼中的portal容器作為目標，就可以了。

在React.js應用程序的public/index.html文件中：

<div id=”root”></div> 
<div id=”portal”></div> 

如上所見，每個React應用程序所需的根元素都像往常一樣存在，使用了portal我們就可以將元素指定到與根同級的位置。

當然，我們也可以動態切換portal

{this.state.show ? ( 
  <Portal node={document && document.getElementById(‘portal’)}>    
    <p>Portal content</p> 
  </Portal> 
) : null} 

2. react-toastify

在現代web開發中，為終端用戶提供動態信息是絕對必要的。不幸的是，JavaScript 中的alert()函數不是實現此目的的好選擇，這一點大家都很清楚，所以才會出現各種各樣的 UI 庫。

這里介紹一個 React 提示插件 react-toastify ，它是一個很小且可自定義的庫，以下是官方給出的事例：

用法如下：

import { ToastContainer, toast } from 'react-toastify' 
import 'react-toastify/dist/ReactToastify.css' 
toast.configure({ 
  autoClose: 2000, 
  draggable: false, 
  position: toast.POSITION.TOP_LEFT 
}) 
const notify = () => toast('Wow so easy !') 
 
const App = () => ( 
  <div className="App"> 
    <button onClick={notify}>Notify !</button> 
  </div> 
) 

一步一步說下：

• 首先導入庫本身，但重要的是隨后導入所需的CSS。
• 然后配置toast，autoClose的意思是toast過了多長時間就會自動消失。
• 通過使用toast()函數，就可以讓toast出現。

更酷的功能：

我們還可以在toast中放入JSX：

const notify = () => toast(<h1>Big Text</h1>) 

autoClose可以替換為false，因此它永遠不會自動關閉。

3. react-contextmenu

很難想象沒有上下文菜單的應用，這在網站上也是很不尋常。這不再是因為越來越多的Web應用程序接近真實的桌面應用程序，而這些應用程序通常已經提供了類似的良好性能和許多功能，而這些功能是我們多年前從未期望過的。

這些功能之一是用戶對右鍵單擊的評估，這種評估在網站上越來越多地使用。當然，那些是帶有許多UI元素的更復雜的控件。

通常用于顯示所謂的上下文菜單，為此目的，有一個非常方便的React.js庫。用法如下：

import React from 'react' 
import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu' 
 
const App = () => ( 
    <React.Fragment> 
        <ContextMenuTrigger id="TriggerID"> {/* ID for every instance must be individual */}  
            <p>Right click on me!</p> 
        </ContextMenuTrigger> 
 
        <ContextMenu id="MenuID"> 
            <MenuItem onClick={() => alert('first ')}> 
                <button>1. Item</button> 
            </MenuItem> 
 
            <MenuItem onClick={() => alert('second')}> 
                <button>2. Item</button> 
            </MenuItem> 
        </ContextMenu> 
    </React.Fragment> 
) 
 
export default App 

<ContextMenuTrigger>是我們需要右鍵單擊以切換菜單的組件。菜單本身是在<ContextMenu>包裝器中定義的。對于每個項，都有一個<ContextMenu>組件，我們可以給它一個onClick事件來處理我們的用戶輸入。

4. react-lazy-load-image-component

在我們的網站上展示大量的圖片需要一段時間。通常，已加載和突然出現的圖片會導致用戶對UI產生不愉快的體驗，當然我們希望避免這種情況。

一個為用戶優化有關圖像的所有功能的強大庫是response-lazy-load-image-component。我們不僅可以創建一個良好的模糊效果，就像我下面的例子，以橋梁加載的圖像，但我們也可以延遲加載圖像。這可以在下面的官方示例中看到：

5. react-onclickoutside

用戶界面設計的一個重要規則是，認真評估盡可能多的用戶輸入。每個人都應該清楚這一點，但是有時可能很難將這樣的東西實現為代碼。

一個可以想象的例子是用戶折疊的菜單。如果你想再次關閉它，90%的用戶傾向于簡單地點擊網站的死區(即那些本身不會產生反應的元素)。在幾乎所有的專業網站上，這是完全相同的。要關閉菜單，只需再次單擊它的旁邊，而不是直接在它上切換。

有一個庫可以滿足這類的操作，它就是response-onclickoutside，它允許我們處理實際元素之外的單擊事件。

在下面的示例中，你可以看到我們如何為一個簡單的h1和button實現此功能。僅當單擊除這兩個之外的任何內容時，console.log才會輸出。處理此事件的函數必須調用handleClickOutside。

import React, { Component } from 'react' 
import onClickOutside from 'react-onclickoutside' 
 
class App extends Component { 
    handleClickOutside = evt => { 
        console.log('You clicked outside!') 
    } 
 
    render() { 
        return ( 
            <div> 
                <h1>Click outside!</h1> 
                <button>Don't click me!</button> 
            </div> 
        ) 
    } 
} 
 
export default onClickOutside(App)