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

const { resolve } = require('path')
const { addDecoratorsLegacy, override } = require('customize-cra')
// 增強(qiáng)自定義給webpack添加相關(guān)配置
const custom = () => config => {
  config.resolve.alias['@'] = resolve('./src')
  return config
}
module.exports = override(addDecoratorsLegacy(), custom())

// 增量配置當(dāng)前項(xiàng)目中的webpack配置，建議在react18中不要用
// 建議在react18中也不要用裝飾器
// override 方法，如果webpack中有此配置則，覆蓋，如果沒(méi)有則添加
const { addDecoratorsLegacy, override } = require('customize-cra')
// 追加上一個(gè)裝飾器
module.exports = override(addDecoratorsLegacy())

const handle = target =>{
    target.run = ()=>{
        console.log("run");
    }
}
@handle
class Demo {};
const d = new Demo();
Demo.run();

const handle = target =>{
    target.prototype.run = ()=>{
        console.log("run");
    }
}
@handle
class Demo {};
const d = new Demo();
d.run();

const handle = (msg) => target =>{
    target.prototype.run = ()=>{
        console.log("run",msg);
    }
}
@handle("我愛(ài)你")
class Demo {};
const d = new Demo();
d.run();

裝飾器裝飾成員屬性，裝飾時(shí)沒(méi)有寫小括號(hào)
target 裝飾的類的實(shí)例 new Demo  this
key 當(dāng)前的成員屬性名稱  username
description 就是當(dāng)前屬性在對(duì)象中它的描述 Object.defineProperty
const handle = (target, key, description) => {
  // 設(shè)置當(dāng)前屬性為只讀屬性
  // description.writable = false
  console.log(target, key, description)
}
class Demo {
  @handle
  username = 'abc'
}

import './style.css'
<div className="todo-title">任務(wù)列表</div>

.todo-title {
  color: red;
}

import styles from './style.module.css'

<div className={styles.title}>任務(wù)列表</div>
<span className={done ? style.title : ''}>{title}</span>