用★/☆字符+css实现打分星：通过inline-block控制布局，color而非opacity区分状态，js事件委托批量点亮；半星用渐变遮罩（background-clip:text+linear-gradient），firefox回退mask-image；组件需memo化浮点值、事件委托、伪元素扩大热区并z-index:-1防遮挡。
用 ★ 字符 + opacity 实现基础打分星
直接用 Unicode 五角星字符 ★（实心）和 ☆（空心）最轻量，适合静态评分或只读场景。浏览器兼容性极好，连 IE9 都没问题。
关键不是“怎么画星”，而是“怎么控制哪几颗亮、哪几颗灰”。常见错误是试图用 JS 拼接字符串再 innerHTML，结果触发重排、中文输入法下光标错位。
- 用
display: inline-block包裹每个星，避免换行/间距不可控 - 给空心星设
color: #ddd，实心星设color: #ffc107，别只靠 opacity 区分——低透明度在深色背景上根本看不出差别 - 鼠标悬停时，不要只改当前星，要从第一颗到目标星全部点亮：用
:hover ~不行（兄弟选择器不往前），得靠 JS 绑定事件后批量加 class
<div class="stars"> <span class="star" data-value="1">☆</span> <span class="star" data-value="2">☆</span> <span class="star" data-value="3">☆</span> <span class="star" data-value="4">☆</span> <span class="star" data-value="5">☆</span> </div>
CSS 渐变遮罩实现半星（.3/.7）的精确填充
纯字符方案只能整星，但产品常要求“3.7 分”这种带小数的显示。这时候不能用 SVG 或 canvas——加载慢、缩放糊、暗色模式下颜色难同步。用线性渐变盖在实心星上，切掉多余部分，是最稳的方案。
核心思路：把一个 ★ 设为 background-clip: text，再用 background-image: linear-gradient 控制填充比例。但注意——text 剪裁只对 -webkit- 有效，Firefox 需 fallback 到 mask-image。
- 必须设
-webkit-text-fill-color: transparent，否则渐变会被文字颜色盖住 - 渐变方向用
to right，起点位置按小数计算：3.7 分 = 填充 74% 宽度（3颗全满 + 0.7×1颗），所以background-size: 74% 100% - Firefox 下
mask-image的 url() 里不能写内联 data:image/svg+xml，得单独提成<svg></svg>元素并用url(#mask-id)
React/Vue 中避免重复渲染的星组件封装要点
每次评分变化都重绘 5 个 ★ 字符？看似简单，但 React 里如果父组件频繁 setState，子组件没做 memo，星组件会无意义重 render，尤其在列表里嵌套时卡顿明显。
不是“要不要用 useMemo”，而是“哪些值真会影响视觉输出”。比如 value=3.7 和 value=3.70 渲染结果完全一样，但 Object.is 会判为不同，导致多余更新。
- 用
useMemo缓存星数组时，依赖项只取Math.round(value * 10) / 10，丢掉毫秒级浮点误差 - 禁止在 star 元素上绑
onClick={() => setValue(i)}—— 这会让每个星都闭包整个 value 状态，内存泄漏风险高；统一用事件委托到容器，再从event.target.dataset.value读 - 暗色模式下，别用
prefers-color-scheme媒体查询动态改 CSS 变量——切换时星会闪一下；直接用color-scheme: light dark配合系统色值更稳
移动端点击区域过小导致误操作的修复方式
设计稿里星宽 20px，但手指点击准确率低于 70%。这不是交互问题，是 CSS 没给足点击热区。很多团队加 padding，结果星之间间距炸开，破坏对齐。
正确做法是保持视觉尺寸不变，只扩大响应区域：用 ::after 伪元素撑开 hit area，同时 pointer-events: none 避免干扰原元素事件流。
- 给每个星加
position: relative，然后::after设content: ""、position: absolute、inset: -12px（上下左右各扩 12px） - 必须加
z-index: -1，否则伪元素会挡住相邻星的 hover 效果 - iOS Safari 对
inset支持差，降级用top/left/bottom/right: -12px
半星精度、多端点击热区、状态更新性能——这三块不串起来调，单点优化没用。尤其是渐变遮罩那块，Chrome 和 Safari 对 background-clip: text 的 subpixel 渲染有差异，0.5px 偏移就能让半星看起来像断开的两截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
