react-typescript 项目

推荐的组件库：https://chakra-ui.com/；

路由react-router-dom:outlet部分的路由得由：import {Suspense} from 'react'，的Suspense包裹；

配置@修饰符：

1.下载：npm i babel-plugin-import customize-cra react-app-rewired --save-dev

2.在根目录下创建config-overrides.js

const path = require('path');

module.exports = function override(config, env) {
  config.resolve.alias['@'] = path.resolve(__dirname, 'src');

  return config;
};

3.在根目录下创建paths.json

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    }
  }

4.修改package.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

5.在tsconfig.json中添加baseUrl,paths.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "extends": "./paths.json"
}

6.搜索框防抖节流的实现

npm i  lodash

import {debounce} from 'lodash';

 // 搜索框内容

  const [text,setText] = useState<string>('');

//防抖节流后的数据可作为异步请求的参数

  const [txt,setTxt] = useState<string>('');

  // 搜索框防抖功能的实现

  const sendQuery = (query:any) => setTxt(query);//这里可以进行异步操作

  const delayText = useCallback(debounce(q => sendQuery(q), 500), []);

  const searchCustomer = (e:any) => {

    setText(e.target.value);

    delayText(e.target.value);

  };

<input value={text} onChange={searchCustomer}/>

//加入正则表达式实现搜索功能

let reg = new RegExp(字符串/变量, "g")，可选g,i,m,分别用于指定全局匹配、区分大小写的匹配和多行匹配

正则表达式（）：let reg = new RegExp("(" + query + ")", "g");

reg.test(要验证的内容)