这里只是简单列举具体用法大家可以自行搜素
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’;
未完待续