自动适配内容高度的原理与实现
" />
该代码通过先重置再重设 `style.height`，强制触发浏览器重新计算 `
在 Web 开发中，让 <textarea> 根据输入内容自动调整高度是一个常见需求。但原生 <textarea> 不具备自动伸缩能力，需借助 JavaScript 手动控制其 style.height。你看到的这段代码正是实现该功能的关键技巧：
<textarea
onInput={(event) => {
event.target.style.height = '5px'; // ① 临时重置为极小高度
event.target.style.height = event.target.scrollHeight + 'px'; // ② 重设为真实内容所需高度
}}
/>为什么需要两步赋值？
关键在于 浏览器渲染机制：scrollHeight 返回的是元素内容的完整高度（包括溢出部分），但它依赖于当前样式（尤其是 height 和 overflow）来准确计算。如果 <textarea> 当前 height 是 auto 或一个固定较大值，scrollHeight 可能被缓存或受旧布局影响，导致返回值偏大（例如包含未换行的长文本产生的“假高度”）。
第一步 event.target.style.height = '5px' 的作用是：
- 强制将元素高度压缩到极小值；
- 触发浏览器同步重排（reflow），清空旧布局缓存；
- 确保后续读取 scrollHeight 时，DOM 基于最新、最紧凑的尺寸重新测量内容真实高度。
第二步 event.target.style.height = event.target.scrollHeight + 'px' 则将高度精确设置为内容实际所需高度，实现无缝拉伸。
✅ 正确效果：输入换行或粘贴多行文本 → 高度平滑增加 → 无滚动条、无空白、无截断 ❌ 若注释掉第一行：scrollHeight 可能复用旧高度（尤其在快速输入时），导致高度增长滞后或卡顿，甚至出现滚动条闪烁。
补充说明与最佳实践
- offsetHeight 始终返回渲染后的可视高度（含 padding/border），它不会随 scrollHeight 变化而立即更新——这是你 console.log(event.target.offsetHeight) 值不变的原因；真正驱动变化的是 style.height。
- 推荐添加 overflow: hidden 到 <textarea> 样式中，避免在高度重设瞬间出现滚动条闪现：
textarea { overflow: hidden; resize: none; /* 禁用手动拖拽，保持体验一致 */ min-height: 24px; /* 防止过小 */ } - 生产环境建议加入防抖或最小高度保护，避免极端情况（如全空格输入）导致高度塌陷：
const minHeight = 24; event.target.style.height = '5px'; event.target.style.height = Math.max(minHeight, event.target.scrollHeight) + 'px';
掌握这一“重置—重测—重设”模式，不仅能用于 <textarea>，还可迁移到其他需要动态响应内容尺寸的场景（如 <pre>、自定义折叠面板等）。核心思想始终如一：主动干预渲染流程，确保 DOM 测量基于最新、最干净的布局状态。
