react 相关组件和技术栈

2024年3月26日 145次阅读 来源: wolfzwz

这里只是简单列举具体用法大家可以自行搜素

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

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';

未完待续

    原文作者：wolfzwz
    原文地址: https://segmentfault.com/a/1190000018014295
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞