这里只是简单列举具体用法大家可以自行搜素Suspense处理异步配合lazy使用方法如下 import React, {lazy, Suspense} from ‘react’; const OtherComponent = lazy(() => import(’./OtherComponent’)); function MyComponent() { return ( <Suspense fallback={<div>Loading…</div>}> <OtherComponent /> </Suspense> ); }react-document-title/* react-document-title 改变文档的title*/import DocumentTitle from ‘react-document-title’;return ( <React.Fragment> <DocumentTitle title={this.getPageTitle(pathname, breadcrumbNameMap)}> {/* 全局响应式断点 在布局最外层添加class 方便给不同的元素添加响应式样式 /} <ContainerQuery query={query}> {params => ( <Context.Provider value={this.getContext()}> <div className={classNames(params)}>{layout}</div> </Context.Provider> )} </ContainerQuery> </DocumentTitle> <Suspense fallback={<PageLoading />}>{this.renderSettingDrawer()}</Suspense> </React.Fragment>);memoize-one/ react-container-query https://www.npmjs.com/package/react-container-query 响应组件 参数 query 响应式的断点位置 props.children 需要是一个返回组件的函数 <ContainerQuery query={query}> {params => ( <Context.Provider value={this.getContext()}> <div className={classNames(params)}>{layout}</div> </Context.Provider> )} </ContainerQuery>/import { ContainerQuery } from ‘react-container-query’;classnames/ https://github.com/JedWatson/classnames classNames(‘foo’, ‘bar’); // => ‘foo bar’ classNames(‘foo’, { bar: true }); // => ‘foo bar’ classNames({ ‘foo-bar’: true }); // => ‘foo-bar’ classNames({ ‘foo-bar’: false }); // => ’’ classNames({ foo: true }, { bar: true }); // => ‘foo bar’ classNames({ foo: true, bar: true }); // => ‘foo bar’ // lots of arguments of various types classNames(‘foo’, { bar: true, duck: false }, ‘baz’, { quux: true }); // => ‘foo bar baz quux’ // other falsy values are just ignored classNames(null, false, ‘bar’, undefined, 0, 1, { baz: null }, ‘’); // => ‘bar 1’/path-to-regexp/ 在路径字符串中使用正则*/import pathToRegexp from ‘path-to-regexp’;react-media/* 添加响应式，根据屏幕大小返回不同组件*/import Media from ‘react-media’;未完待续