在 React 函数组件中，setState 是异步的，直接在更新后调用 ref.scrollIntoView() 会因 DOM 尚未重渲染而失效；应使用 useEffect 监听状态变化，在 DOM 更新完成后再执行滚动。
在 react 函数组件中，`setstate` 是异步的，直接在更新后调用 `ref.scrollintoview()` 会因 dom 尚未重渲染而失效；应使用 `useeffect` 监听状态变化，在 dom 更新完成后再执行滚动。
当你在函数组件中动态添加表单项（如新增输入框）并希望自动滚动到底部新元素时，常见的错误是在 setState 后立即调用 ref.scrollIntoView()：
function addItem() {
const newData = [...state, { name: 'Ted' }];
setState(newData);
ref.scrollIntoView({ behavior: 'smooth', block: 'end' }); // ❌ 失效：DOM 还未更新
}此时 ref 指向的 DOM 节点尚未随新数据重新渲染，导致滚动失败。
✅ 正确做法是利用 useEffect 的响应式机制——它在每次依赖项变化、且组件完成渲染（即 DOM 已同步更新）后执行。由于你只希望在“列表长度增加”时触发滚动（而非所有字段变更，如修改姓名），最佳依赖项是 state.length：
useEffect(() => {
if (ref.current) {
ref.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
}, [state.length]); // ✅ 精准触发：仅当列表项数量变化时滚动⚠️ 注意事项：
- 务必检查 ref.current 是否存在，避免服务端渲染（SSR）或 ref 尚未挂载时调用 scrollIntoView 报错；
- 使用 state.length 而非 state 作为依赖项，可避免不必要的重复执行（例如修改某项 name 不会触发滚动）；
- 若需兼容旧版浏览器，behavior: 'smooth' 可降级为 'auto'，但建议保留以提升用户体验；
- 不要将 addItem 逻辑写在 useEffect 内部来“模拟回调”，这会破坏事件驱动逻辑，违背 React 数据流原则。
总结：useEffect 不是副作用的“兜底方案”，而是 React 提供的、与渲染周期严格对齐的生命周期钩子。将 DOM 操作（如滚动、聚焦、动画）放在 useEffect 中，并选择最小化、语义明确的依赖项（如 state.length），即可优雅替代 setTimeout(..., 0) 等临时性 hack，写出可维护、高性能的函数组件逻辑。
