一些库

styled-components

• styled-components 安装与使用 https://styled-components.com/

use-immer

• use-immer 安装与使用 https://www.npmjs.com/package/

classnames

• classnames 是一个简单 JS 库，可以方便的通过条件动态控制 class 类名的显示
• classnames 安装与使用 https://www.npmjs.com/package/classnames

FlexSearch

• FlexSearch 安装与使用 https://github.com/nextapps-de/flexsearch

Lodash

• Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

• 遍历 array、object 和 string

• 对值进行操作和检测

• 创建符合功能的函数

• Lodash 官网 https://www.lodashjs.com/

source-map-explore 打包优化

1 安装

 pnpm add source-map-explorer -D

• 2 在 package.json 文件的 script 中添加："analyze": "source-map-explorer 'build/static/js/*.js'"
• 3 在终端中先对项目打包：pnpm run build
• 4 运行命令分析：pnpm run analyze

实现多选功能

import { useState } from 'react'
import { letters } from './data.js'
import Letter from './Letter.js'

export default function MailClient() {
  const [selectedIds, setSelectedIds] = useState([])

  const selectedCount = selectedIds.length

  function handleToggle(toggledId) {
    // 它以前是被选中的吗？
    if (selectedIds.includes(toggledId)) {
      // Then remove this ID from the array.
      setSelectedIds(selectedIds.filter((id) => id !== toggledId))
    } else {
      // 否则，增加 ID 到数组中。
      setSelectedIds([...selectedIds, toggledId])
    }
  }

  return (
    <>
      <h2>Inbox</h2>
      <ul>
        {letters.map((letter) => (
          <Letter
            key={letter.id}
            letter={letter}
            isSelected={selectedIds.includes(letter.id)}
            onToggle={handleToggle}
          />
        ))}
        <hr />
        <p>
          <b>You selected {selectedCount} letters</b>
        </p>
      </ul>
    </>
  )
}