在 React 函数组件中，setState 是异步的，无法立即访问更新后的 DOM；通过 useEffect 监听依赖项（如数组长度变化）可安全触发 scrollIntoView，避免 setTimeout 等不优雅的 hack 方案。
在 react 函数组件中，`setstate` 是异步的，无法立即访问更新后的 dom；通过 `useeffect` 监听依赖项（如数组长度变化）可安全触发 `scrollintoview`，避免 `settimeout` 等不优雅的 hack 方案。
当你动态添加表单项并希望自动滚动到底部新元素时，直接在 addItem 函数中调用 ref.scrollIntoView() 会失败——因为此时 state 尚未更新，DOM 也未重渲染，ref 指向的仍是旧节点或尚未挂载的新节点。
✅ 正确做法是：将滚动逻辑解耦到 useEffect 中，并精确选择触发条件。例如，仅当列表长度变化（即新增了元素）时才执行滚动，而忽略其他不相关状态变更（如修改某项的 name）：
import { useState, useEffect, useRef } from 'react';
function MyForm() {
const [items, setItems] = useState([{ name: 'lex' }]);
const lastItemRef = useRef<HTMLParagraphElement>(null);
const addItem = () => {
setItems(prev => [...prev, { name: 'Ted' }]);
};
// ✅ 仅当 items.length 变化时触发（即新增/删除项），与 name 修改等无关
useEffect(() => {
if (lastItemRef.current) {
lastItemRef.current.scrollIntoView({
behavior: 'smooth',
block: 'end'
});
}
}, [items.length]); // 关键：用 length 作为最小粒度依赖
return (
<div>
{items.map((item, index) => (
<p
key={index}
ref={index === items.length - 1 ? lastItemRef : null}
>
{item.name}
</p>
))}
<button onClick={addItem}>Add Item</button>
</div>
);
}
export default MyForm;? 关键要点说明：
- 使用 items.length 而非整个 items 数组作为 useEffect 依赖，既保证触发时机准确（新增即滚动），又避免因对象引用变化导致不必要的重复执行；
- 动态绑定 ref：仅给最后一个 <p> 元素设置 ref（利用 index === items.length - 1 判断），确保每次只滚动到最新项；
- 不要使用 setTimeout(..., 0) 或 Promise.resolve().then(...) —— 它们不可靠（可能在 DOM 渲染前执行）、难以维护，且违背 React 的数据流设计原则；
- 若需支持服务端渲染（SSR），请在 useEffect 内部增加 if (typeof window !== 'undefined') 判断，防止服务端报错。
? 扩展提示：若需更精细控制（如仅在用户主动添加时滚动，而非初始化渲染后也滚动），可配合 useRef 标记“是否为首次添加”，进一步提升体验一致性。
