useCallback（fn，deps）相当于useMemo（（）=> fn，deps）

let filterProductByBrands = useCallback((() => {
    return originalProducts.filter(
      (product) => product.brand.brandName.indexOf(selectedBrand) >= 0
    )
  })(),[originalProducts, selectedBrand])
  
  相当于
  
    let filterProductByBrands = useMemo(() => {
    return originalProducts.filter(
      (product) => product.brand.brandName.indexOf(selectedBrand) >= 0
    )
  },[originalProducts, selectedBrand])
  
  

npm install json-server -g

{
  "products": [
    {
      "id": 1,
      "productName": "iPhone",
      "price": 8900,
      "quantity": 1
    },
    {
      "id": 2,
      "productName": "iPad Pro",
      "price": 124000,
      "quantity": 3
    },
    {
      "id": 3,
      "productName": "荣耀p30",
      "price": 4000,
      "quantity": 3
    },
    {
      "id": 4,
      "productName": "小米",
      "price": 3000,
      "quantity": 8
    },
    {
      "id": 5,
      "productName": "iPad 11",
      "price": 3000,
      "quantity": 34
    }
  ]
  }

json-server react-db.json --watch --port=5000

componentDidMount = async () => {
    const response = await fetch('http://localhost:5000/customers', {
      method: 'GET',
    })
    if (response.ok) {
      const body = await response.json()
      if (body) {
        this.setState({ customers: body, customersCount: body.length})
      } else {
        return 'Error:' + response.status
      }
    }
  }

  //以下可实现点击提交按钮注册新用户并将页面跳转到顾客列表页面
  onSaveClick = async (event) => {
    event.preventDefault()
    //获取用户填写的信息
    var newcustomer = {
      name: this.state.name,
      address: { city: this.state.city },
      phone: this.state.phone,
      photo: this.state.photo,
    }

    var response = await fetch('http://localhost:5000/customers ',
    {method:"POST",
    body: JSON.stringify(newcustomer),
    headers: {"Content-type": "application/json"}
  })
  var body =await response.json()//请求发送成功后跳转页面
  if (body){
    history.replace('/customers')
  }
}

onSaveClick = async (event) => {
    event.preventDefault()
    var newcustomer = {
      name: this.state.name,
      address: { city: this.state.city },
      phone: this.state.phone,
      photo: this.state.photo,
    }
    var id = this.props.match.params.id
    var response = await fetch(`http://localhost:5000/customers/${id} `, {
      method: 'PUT',
      body: JSON.stringify(newcustomer),
      headers: { 'Content-type': 'application/json' },
    })
    var body = await response.json()
    if (body) {
      history.replace('/customers')
    }
  }

onClickDelete =async (id) =>{
   if (window.confirm("确定要删除吗？")) {
     var response = await fetch(`http://localhost:5000/customers/${id}`, {method: "DELETE"})
     if (response.ok){
       let  allcustomers = [...this.state.customers];
       console.log(allcustomers);
       allcustomers = allcustomers.filter(cust => {return cust.id !== id})
       this.setState({customers: allcustomers})
     }
   }
 }

yarn create react-app myapp --typescript

yarn add prettier lint-staged husky stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recommended eslint-config-prettier eslint-plugin-prettier -D

touch .eslintrc .eslintignore .gitattributes .prettierrc .stylelintrc

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
  extends: ['prettier'],
}

# build
build/

* text=auto eol=lf

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf"
}

{
  "extends": ["stylelint-prettier/recommended", "stylelint-config-standard"],
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true,
    "unit-case": null,
    "no-descending-specificity": null,
    "block-no-empty": null,
    "no-empty-source": [true, { "severity": "warning" }],
    "declaration-colon-newline-after": null,
    "function-name-case": null,
    "indentation": null,
    "no-invalid-double-slash-comments": null
  }
}

{
  "scripts": {
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "yarn lint --fix",
    "stylelint": "stylelint \"src/**/*.{css,scss}\"",
    "stylelint:fix": "yarn stylelint --fix"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write", "git add"]
  },
   "eslintConfig": {
    "parser": "babel-eslint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

npm install mobx --save
npm install mobx-react --save
npm i customize-cra --save
npm i react-app-rewired --save
npm i @babel/plugin-proposal-decorators --save

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

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() //+后面的内容
 );

npm install redux-devtools-extension --save-dev

import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(balanceReducer, composeWithDevTools())

pacman -S 包名称

pacman -Rsn 包名称

pacman -Syu 包名称

pacman -Ss 包名称

pacman -Qs 包名称

$ npm init -y

demo
  |-- package.json

$ mkdir src //创建src文件夹
$ cd src 
$ touch addDOMContent.js
$ touch capital.js
$ touch index.js //主文件夹

demo
  |-- package.json
  |-- src
     |--index.js
     |--capital.js
     |--addDOMContent.js

function capital(string) {
  const capitalizedString =
    string.substring(0, 1).toUpperCase() + string.substring(1)
  return capitalizedString
}

export default capital

function addDOMContent(content) {
  const node = document.createElement("h1")
  node.innerText = content
  document.body.appendChild(node)
}

export default addDOMContent

import capital from "./capital"
import addDOMContent from "./addDOMContent"

export { capital, addDOMContent }

$ npm i --save-dev webpack webpack-cli @babel/core @babel/preset-env babel-loader

"devDependencies": {
   "@babel/core": "^7.16.0",
   "@babel/preset-env": "^7.16.4",
   "babel-loader": "^8.2.3",
   "webpack": "^5.64.1",
   "webpack-cli": "^4.9.1"
 }

const path = require("path")

module.exports = {
  entry: path.resolve(__dirname, "src/index.js"), //打包入口文件
  output: {
    path: path.resolve(__dirname, "dist"),//打包后的文件夹
    filename: "index_bundle.js", //打包后的文件名称
    library: "$", // 库名称
    libraryTarget: "umd", // 通用模块定义
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/, //不解析node_modules文件夹中的文件
        use: "babel-loader", // 用babel-loader解析所有的以.js为后缀的所有文件
      },
    ],
  },
  mode: "development",
}

{
  presets: ["@babel/preset-env"]
}

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
+  "main": "dist/index_bundle.js",
+  "scripts": {
+    "build": "webpack"
+  },//+表示添加的内容
  "keywords": [],
  "author": "Hridayesh Sharma",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
  }
}

$ npm run build 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
  </head>
  <body>
    <script src="dist/index_bundle.js"></script>
    <script>
      console.log($)
      alert($.capital("hridayesh"))
      $.addDOMContent("Well It Works Fine!!!")
    </script>
  </body>
</html>

$ npm install babel-core babel-plugin-transform-decorators

{
  "plugins": ["transform-decorators"]
}

babel.transform("code", {plugins: ["transform-decorators"]})

@testable
class MyTestableClass{
  //.....
}
//target指代MyTestableClass，为MyTestableClass添加静态属性
function testable(target) {
  target.isTestable = true
}
console.log(MyTestableClass.isTestable); //true

@testable(true)
class MyTestableClass{
  //.....
}

function testable(isTestable) {
 return function (target) {
   target.isTestable = isTestable;
 }
}

console.log(MyTestableClass.isTestable); //true

function readOnly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}
//使用readOnly方法修饰类的name方法
class Person{
  @readOnly
  name(){
    return `${this.first}${this.last}`
  }
}

class MyReactComponent extends React.Comment {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
//装饰器模式
@connect(mapDispatchToProps, mapStateToProps)
// eslint-disable-next-line prettier/prettier
export default class MyReactComponent extends React.Component{}

function mixins(...list) {
  return function (target) {
    Object.assign(target.proptype, ...list);
  };
}

//使用
const Foo = {
  foo() {
    console.log('foo');
  },
};

@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo(); //foo

function pow(x, n) {
  if (n == 1) {
    return x;
  } else {
    return x * pow(x, n - 1);
  }
}

function factorial(n) {
  if (n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(3)); //6

function factorial(n, init = 1) {
  if (n === 1) {
    return init; //返回的条件变了
  } else {
    return factorial(n - 1, init * n);
  }
}

console.log(factorial(3)); //6

function sumArray(arr, total = 0) {
 if (arr.length === 0) {
  return total;
 }
 return sumArray(arr, total + arr.pop());
}

let arr = [1, 3, 4, 5];
console.log(sumArray(arr));

let a = 1; //相当与第n-2的值
let b = 1; //相当与第n-1的值
let sum = 1; //相当与前两项的和,也是n的值
function fn(n) {
  if (n < 3) {
    sum = 1;
  }
  for (i = 3; i <= n; i++) {
    return fn(n - 2) + fn(n - 1);
  }
  return sum;
}
console.log(fn(8)); //21

function factorial2(n, start = 1, total = 1) {
  if (n <= 2) {
    return total;
  } else {
    return factorial2(n - 1, total, start + total);
  }
}
console.log(factorial2(4)); //3

let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]];
function flat(arr, result = []) {
  arr.forEach((value) => {
    if (Array.isArray(value)) {
      result = result.concat(flat(value, []));
    } else {
      result.push(value);
    }
  });
  return result;
}
console.log(flat(arr)); //[1, 2, 3, 4, 5,6, 7, 8, 9]

//数组对象格式化
let obj = {
  a: '1',
  b: {
    c: '2',
    D: {
      E: '3',
    },
  },
};

function nameTo_(object) {
  let regObj = new RegExp('([A-Z]+)', 'g');
  for (let i in object) {
    if (object.hasOwnProperty(i)) {
      let temp = object[i];
      if (regObj.test(i.toString())) {
        temp = object[
          i.replace(regObj, function (result) {
            return '_' + result.toLowerCase();
          })
        ] = object[i];
        delete object[i];
      }
      if (
        typeof temp === 'object' ||
        Object.prototype.toString.call(temp) === '[object Array]'
      ) {
        nameTo_(temp);
      }
    }
  }
  return object;
}

console.log(nameTo_(obj));