2021之react最常用的库

pubsub-js

描述：PubSubJS是使用JavaScript编写的基于主题的 发布/订阅库，PubSubJS具有同步解耦功能，因此主题是异步发布的。这有助于使您的程序可预测，因为在消费者处理主题的过程中不会阻止主题的发起者，是在程序里可以分发广播的框架

安装：

npm i pubsub-js -S

地址：https://www.npmjs.com/package/pubsub-js

 

react-router-dom

描述：在构建SPA页面程序时，基于react的一个路由组件库，用于页面之前的跳转和在程序里面拿到URL

安装：

npm install react-router-dom -S

地址：https://www.npmjs.com/package/react-router-dom

 

redux

描述：主要用于在react中数据共享，在不同的组件之间共享一套数据，并且是最新的数据，不过实现过程比较繁琐和死板

安装：

npm install redux -S

地址：https://www.npmjs.com/package/redux

 

redux-thunk

描述：redux默认只处理同步，对于API请求这样的异步任务则无能为力。虽然API是异步操作，但store.dispatch并不是异步，而axios通过get方法请求回来数据后，store.dispatch在axios中的then方法中同步取得数据

用法：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from '../reducer'
export default createStore(rootReducer,applyMiddleware(thunk))

安装

npm install --save redux-thunk

 

react-redux

 描述：用于在react中和redux一起使用，只用提供了provider和connet这两个方法进行store的挂载和在组件中的redux解藕

安装

npm install react-redux -S

地址：https://www.npmjs.com/package/react-redux

 

js-cookie

描述：对cookie的进一步封装，比原生的cookie更好用，支持传入对象进行转换成json，提供了增删查改和过期时间的设置

安装

npm install js-cookie --S

地址：https://www.npmjs.com/package/js-cookie

 

blueimp-md5

描述：对字符进行加密的库，把任何字符都格式化为32位的串，对用户的密码信息就可以使用其进行加密

安装

npm install blueimp-md5 -S

地址：https://www.npmjs.com/package/blueimp-md5

 

axios

描述：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在前端的应用中大量使用，提供了很多方便的方法，也可以自己设置请求的配置，并且添加了拦截器

特性:

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

安装

npm install axios -S

地址：http://www.axios-js.com/zh-cn/docs/

 

react-countup

描述：该组件用于react中计数的组件，可以设置开始值和结束值，可以看到数字的变化，还可以设置变化持续的时间

安装

npm i react-countup  -S

地址：https://www.npmjs.com/package/react-countup

 

react-particles-js

描述：用于react项目中背景粒子运动的效果，可以设置背景或者粒子的各种运动

安装

npm i  react-particles-js -S

地址：https://www.npmjs.com/package/react-particles-js

 

react-zmage

描述：用于显示图片的一个轻量级组件，当点击图片时候会显示图片的原始大小，保证不失帧

安装

npm i react-zmage -S

地址：https://github.com/Caldis/react-zmage#set

 

react-cropper

 描述：用于react中的图片剪裁的组件，含有丰富的功能，图片的大小和剪裁框的大小随意调整

安装

npm i react-cropper -S

//引用
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";

地址：https://www.npmjs.com/package/react-cropper