react 相關組件和技術棧

這裏只是簡單列舉具體用法你們能夠自行搜素

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

未完待續