您好,登錄后才能下訂單哦!
這篇文章主要講解了“優(yōu)秀的React.js庫有哪些”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“優(yōu)秀的React.js庫有哪些”吧!
1. react-portal
我認(rèn)為React中的 Portals(傳送門) 對大多數(shù)人來說都很熟悉,即使它們很少被使用。下面是 Reac t文檔中對它們的描述:
Portal 提供了一種將子節(jié)點(diǎn)渲染到存在于父組件以外的 DOM 節(jié)點(diǎn)的優(yōu)秀的方案。 |
通常,我們的整個 React 應(yīng)用程序都是在HTML中的一個 DOM 節(jié)點(diǎn)中渲染的。但是通過portals,我們可以定義附加的節(jié)點(diǎn),在這些節(jié)點(diǎn)上我們可以掛載應(yīng)用程序的各個部分,例如單個獨(dú)立的組件。
然而,在官方文檔中,門戶以一種相當(dāng)麻煩和復(fù)雜的方式進(jìn)行描述,這就是也 react-portal 出現(xiàn)的一個原因。
現(xiàn)在是 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容器作為目標(biāo),就可以了。
在React.js應(yīng)用程序的public/index.html文件中:
<div id=”root”></div> <div id=”portal”></div>
如上所見,每個React應(yīng)用程序所需的根元素都像往常一樣存在,使用了portal我們就可以將元素指定到與根同級的位置。
當(dāng)然,我們也可以動態(tài)切換portal
{this.state.show ? ( <Portal node={document && document.getElementById(‘portal’)}> <p>Portal content</p> </Portal> ) : null}
2. react-toastify
在現(xiàn)代web開發(fā)中,為終端用戶提供動態(tài)信息是絕對必要的。不幸的是,JavaScript 中的alert()函數(shù)不是實(shí)現(xiàn)此目的的好選擇,這一點(diǎn)大家都很清楚,所以才會出現(xiàn)各種各樣的 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> )
一步一步說下:
首先導(dǎo)入庫本身,但重要的是隨后導(dǎo)入所需的CSS。
然后配置toast,autoClose的意思是toast過了多長時間就會自動消失。
通過使用toast()函數(shù),就可以讓toast出現(xiàn)。
更酷的功能:
我們還可以在toast中放入JSX:
const notify = () => toast(<h2>Big Text</h2>)
autoClose可以替換為false,因此它永遠(yuǎn)不會自動關(guān)閉。
3. react-contextmenu
很難想象沒有上下文菜單的應(yīng)用,這在網(wǎng)站上也是很不尋常。這不再是因為越來越多的Web應(yīng)用程序接近真實(shí)的桌面應(yīng)用程序,而這些應(yīng)用程序通常已經(jīng)提供了類似的良好性能和許多功能,而這些功能是我們多年前從未期望過的。
這些功能之一是用戶對右鍵單擊的評估,這種評估在網(wǎng)站上越來越多地使用。當(dāng)然,那些是帶有許多UI元素的更復(fù)雜的控件。
通常用于顯示所謂的上下文菜單,為此目的,有一個非常方便的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
4. react-lazy-load-image-component
在我們的網(wǎng)站上展示大量的圖片需要一段時間。通常,已加載和突然出現(xiàn)的圖片會導(dǎo)致用戶對UI產(chǎn)生不愉快的體驗,當(dāng)然我們希望避免這種情況。
一個為用戶優(yōu)化有關(guān)圖像的所有功能的強(qiáng)大庫是response-lazy-load-image-component。我們不僅可以創(chuàng)建一個良好的模糊效果,就像我下面的例子,以橋梁加載的圖像,但我們也可以延遲加載圖像。這可以在下面的官方示例中看到:
5. react-onclickoutside
用戶界面設(shè)計的一個重要規(guī)則是,認(rèn)真評估盡可能多的用戶輸入。每個人都應(yīng)該清楚這一點(diǎn),但是有時可能很難將這樣的東西實(shí)現(xiàn)為代碼。
一個可以想象的例子是用戶折疊的菜單。如果你想再次關(guān)閉它,90%的用戶傾向于簡單地點(diǎn)擊網(wǎng)站的死區(qū)(即那些本身不會產(chǎn)生反應(yīng)的元素)。在幾乎所有的專業(yè)網(wǎng)站上,這是完全相同的。要關(guān)閉菜單,只需再次單擊它的旁邊,而不是直接在它上切換。
有一個庫可以滿足這類的操作,它就是response-onclickoutside,它允許我們處理實(shí)際元素之外的單擊事件。
在下面的示例中,你可以看到我們?nèi)绾螢橐粋€簡單的h2和button實(shí)現(xiàn)此功能。僅當(dāng)單擊除這兩個之外的任何內(nèi)容時,console.log才會輸出。處理此事件的函數(shù)必須調(diào)用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> <h2>Click outside!</h2> <button>Don't click me!</button> </div> ) } } export default onClickOutside(App)
感謝各位的閱讀,以上就是“優(yōu)秀的React.js庫有哪些”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對優(yōu)秀的React.js庫有哪些這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。