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和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。