5個很棒的 React.js 庫，值得你親手試試！

做者：Louis Petrik
譯者：前端小智
來源：medium

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

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

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

1. react-portal

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

Portal 提供了一種將子節點渲染到存在於父組件之外的 DOM 節點的優秀的方案。

一般，咱們的整個 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>包裝器中定義的。對於每一個項，都有一個<MenuItem>組件，咱們能夠給它一個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)

總結

但願對您有所幫助。 謝謝閱讀！

---

來源：https://webdevhub.net/article...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。