React 官方推荐库

使用过程中，运用到的常用库和插件，会持续更新...

Redux DevTools Extension: 浏览器调试redux用的扩展程序插件

1. 浏览器安装插件

直接搜索 Redux DevTools，搜索结果的第一条 GitHub 中进行对应浏览器的安装

2. 使用

1) 没有使用中间件的情况
const store = createStore(
    reducer,
    initialState,
    window.devToolsExtension ? window.devToolsExtension() : f => f
 );
 
 2) 使用中间件的情况
 const store = createStore(
    reducer,
    initialState,
    compose(
      applyMiddleware(thunk),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )
 );

react-router-dom 之异步加载路由（react-loadable）

1. 安装

npm install react-loadable

2. 使用

//入口文件中不在调用之前的RouterTest组件而是调用这个异步组件
//获取路由参数的方法需要进行调整要在对应的再组件中调用react-router-dom中的withRouter方法
//然后export default connect(null,null)(withRouter(RouterTest))
import React from 'react'
import Loadable from 'react-loadable'
const LoadingRouterTest = Loadable({
    loader:() => import('./RouterTest.js'),
    loading () {return <div>正在加载...</div>}
})
 
export default () => <LoadingRouterTest />

// 或者 路由配置配置
<Route
   exact
   path="/account/bindRegistration/:thirdPartyId/:type/"
   render={routeProps => {
     return createElement(
       Loadable({
         loader: () => import(/* webpackChunkName: "account.bindRegister" */ "./views/containers/auth/refactor/BindPage"),
         loading: LoadingComponent,
         delay: 200
       }),
       { ...routeProps }
     );
   }}
/>

classnames：js动态添加class类名

具体用法

1. 安装

npm install classnames

2. 使用

import cls from 'classnames';

// 这里可以根据各属性动态添加class，
// 如果属性值为true则为其添加该类名，
// 如果值为false，则不添加。
const serverTypeClassName = cls('server-type-info-item', {
  'has-server-type': !isEmpty(currentSelectServeType),
});
    
<div className={serverTypeClassName}>服务类型</div>

query-string ：解析和字符串化URL查询字符串

具体用法

1. 安装

npm install query-string

2. 使用（常用API）

1) qs.parse(string, [options])

import qs from 'query-string';

location.search  // ?name=jim
location.hash  // #token=123
qs.parse('?name=jim')  // {name: 'jim'}
qs.parse('#token=123')  // {token: '123'}
qs.parse('name=jim&name=lily&age=22')  // {name: ['jim', 'lily'], age: 22}

2) qs.stringify(object, [options])

qs.stringify({name: 'jim', age: 22});  // 'age=22&name=jim'
qs.stringify({name: ['jim', 'lily'], age: 22});  // 'age=22&name=jim&name=lily'