脚本宝典收集整理的这篇文章主要介绍了react 相关组件和技术栈，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
这里只是简单列举具体用法大家可以自行搜素
SusPEnse
处理异步配合lazy使用方法如下
import React, {lazy, Suspense} From 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<@H_126_50@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
memoize-one
这个库的每个实例都缓存了一个结果
记忆化库
memoizeOne(resultFn, isEqual)
接收一个结果函数和一个对比函数，对比函数为空则默认使用===来进行入参的比较。react-container-query
/*
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';未完待续
以上是脚本宝典为你收集整理的react 相关组件和技术栈全部内容，希望文章能够帮你解决react 相关组件和技术栈所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。