阅读 97

React 官方推荐库

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

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

  1. 浏览器安装插件
直接搜索 Redux DevTools,搜索结果的第一条 GitHub 中进行对应浏览器的安装
复制代码
  1. 使用
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
复制代码
  1. 使用
//入口文件中不在调用之前的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
复制代码
  1. 使用
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
复制代码
  1. 使用(常用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'

复制代码
文章分类
前端
文章标签