该代码通过先重置 textarea 高度为极小值（如 '5px'），再设为 scrollheight，强制触发浏览器重新计算内容高度，从而实现无滚动条的自适应伸缩。
在 Web 开发中，让 <textarea> 根据输入内容自动伸缩（即“自适应高度”）是一个常见需求。上面这段 React 代码正是实现该功能的核心逻辑：
<textarea
onInput={event => {
event.target.style.height = '5px'; // 步骤①：临时重置高度
event.target.style.height = event.target.scrollHeight + 'px'; // 步骤②：设为实际内容所需高度
}}
/>为什么需要两步？关键在于浏览器的渲染机制：
scrollHeight 返回的是元素内容的完整高度（包括溢出部分），但它依赖于当前元素的已计算样式（computed style）。如果 textarea 当前已有较大高度（例如因之前输入而撑开），浏览器可能缓存了布局信息，直接赋值 scrollHeight 可能无法触发准确重测量——尤其当内容变少、行数减少时，scrollHeight 值可能未及时更新。
✅ 第一步 event.target.style.height = '5px'：
将内联 height 强制设为一个极小值（远小于默认行高），迫使浏览器“忘记”之前的尺寸假设，清空高度缓存，并立即触发布局重排（reflow）。此时 textarea 高度被压缩，内容开始溢出，scrollHeight 便能真实反映当前文本所需的最小高度。
✅ 第二步 event.target.style.height = event.target.scrollHeight + 'px'：
在重排后立即读取更新后的 scrollHeight（此时已准确包含换行、字体、行高、padding 等影响），再将 height 设为该值，使 textarea 刚好包裹全部内容，不留空白也不出现滚动条。
⚠️ 注意事项：
- 必须使用 onInput（而非 onChange），以实时响应每一次输入（包括粘贴、删除、回车等）；
- scrollHeight 包含 padding（但不含 border 或 margin），因此建议 textarea 的 box-sizing 保持默认 content-box，或统一设为 border-box 并确保 padding 值稳定；
- 若需兼容 Safari 等对 scrollHeight 计算稍滞后的浏览器，可加微小延迟（不推荐）或配合 offsetHeight 校验，但多数场景下双步法已足够鲁棒；
- 实际项目中建议封装为自定义 Hook（如 useAutosizeTextarea），并添加最小/最大高度限制、防抖（避免高频触发）、以及初始渲染适配等健壮性处理。
总结：这不是“多此一举”，而是巧妙利用浏览器渲染流水线特性——用一次“收缩”换取一次精准“伸展”，是前端实现平滑自适应 textarea 的经典实践。
