关键字 Storybook：组件文档 click-to-react-component：定位组件 dnd：拖拽高阶组件 allotment：拆分窗格 分配-NPM — allotment - npm @babel/standalone：babel的浏览器版本 @types/babel__core：babel插件 reactflow click-to-react-componentReact19用不了 安装1npm install --save-dev click-to-react-component 引用1234567891011121314// main.tsximport React from 'react'import ReactDOM from 'react-dom/client'import App from './App.tsx'// @ts-ignoreimport { ClickToComponent } from 'click-to-re ...

关键字 sass + classnames CSS in JS styled-components css module tailwind sass + classnames安装12cnpm install --save sasscnpm install classnames 介绍 当 className 的确定需要一段复杂计算逻辑的时候，就用 classnames 这个包。 使用12345678910111213141516171819202122232425262728293031.calendar-month { &-body { &-row { height: 100px; display: flex; } &-cell { flex: 1; border: 1px solid #eee; //padding: 10px; color: #ccc; overflow: hidden; &- ...

关键字 react-spring react-transition-group Transition、CSSTransition、TransitionGroup、SwitchTransition @use-gesture/react 不支持react19 react-spring/web官方文档：react-spring 安装1npm install --save @react-spring/web 使用react-spring 主打的是弹簧动画，就是类似弹簧那种回弹效果。 只要指定 mass（质量）、tension（张力）、friction（摩擦力）就可以了。 mass 质量：决定回弹惯性，mass 越大，回弹的距离和次数越多。 tension 张力：弹簧松紧程度，弹簧越紧，回弹速度越快。 friction：摩擦力： 可以抵消质量和张力的效果 react-spring 有不少 api，分别用于单个、多个元素的动画： useSpringValue：指定单个属性的变化。 useSpring：指定多个属性的变化 useSprings：指定多个元素的多 ...

组件打包前置知识1. 模块规范在 JavaScript 生态里，代码组织方式有不同的模块化规范，最常见的有以下三种： CommonJS（CJS） require() 语法 主要用于 Node.js 运行环境 代码示例： 12const lodash = require('lodash');console.log(lodash); 缺点：不适用于浏览器，不能 Tree Shaking（优化打包时移除未使用的代码）。 ES Modules（ESM） import/export 语法 现代 JavaScript 规范，适用于浏览器和 Node.js 代码示例： 12import { debounce } from 'lodash';console.log(debounce); 优势：支持 Tree Shaking，适合前端打包优化。 UMD（Universal Module Definition） 兼容 CommonJS、AMD（另一种浏览器模块规范）和全局变量 适用于在 <script> ...

关键字 Calendar组件 Icon图标组件 Space间距组件 Message全局提示组件 Popover气泡组件 onBoarding引导组件 Upload拖拽上传组件

关键字 Zustand Jotai Zustand安装1cnpm install --save zustand 使用API1234const useStore = create((set, get, store) => ({ stateKey: initialValue, // 初始状态 actionMethod: () => set(...), // 用于更新状态的方法})); create 接受一个回调函数作为参数，该回调函数会返回一个 状态对象（store），这个状态对象可以包含： 状态（state）：数据，例如 count: 0 方法（actions）：用于更新状态的函数，例如 increment: () => set((state) => ({ count: state.count + 1 })) 回调函数的参数create 的回调函数会接收 三个参数： 12345const useStore = create((set, get, store) => ({ count: 0, ...

本周学习关键字 组件 Message全局提示组件 Popover气泡组件 onBoarding引导组件 Upload拖拽上传组件 拖拽高级组件 dnd 状态库 Zustand Jotai 路由 ReactTouter keepalive 基础知识 imuutable immer 不可变数据 history api ： length：history 的条数 forward：前进一个 back：后退一个 go：前进或者后退 n 个 pushState：添加一个 history replaceState：替换当前 history scrollRestoration：保存 scroll 位置，取值为 auto 或者 manual，manual 的话就要自己设置 scroll 位置了 popstate 事件可以监听到 history.go、history.back、history.forward 的导航，拿到最新的 location （go、back、forward）可以触发 popstate，而修改 history （push、replace）不能触发。 ...

本周前端学习关键字 基本知识 受控模式vs非受控模式 如何写单测 如何调试 Storybook 浏览器的5种Observer IntersectionObserver：监听元素可见性变化，常用来做元素显示的数据采集、图片的懒加载 MutationObserver：监听元素属性和子节点变化，比如可以用来做去不掉的水印 ResizeObserver：监听元素大小变化 PerformanceObserver：监听 performance 记录的行为，来上报数据 ReportingObserver：监听过时的 api、浏览器的一些干预行为的报告，可以让我们更全面的了解网页 app 的运行情况 网页的各种距离 CSS sass + classnames styled-components css module tailwind Animation @use-gesture/react @react-spring/web react-transition-group Transition、CSSTransition、TransitionGroup、SwitchTransition ...