[React]用 flushSync 同步更新 state

先树立一个小目标2024-06-06 11:46

同时操作state和ref的情况还是有的，按我的原来的处理肯定是使用setTimeout了，看到官方有解决方案，摘录下来以便查看。

源代码就不完整贴了，直接看问题代码块：

javascript 复制代码

setTodos([ ...todos, newTodo]);
listRef.current.lastChild.scrollIntoView();

在 React 中，state 更新是排队进行的。在这个示例中会导致问题，因为 setTodos 不会立即更新 DOM。因此，当你将列表滚动到最后一个元素时，尚未添加待办事项。这就是为什么滚动总是"落后"一项的原因。

要解决此问题，你可以强制 React 同步更新（"刷新"）DOM。为此，从 react-dom 导入 flushSync 并将 state 更新包裹到 flushSync 调用中：

javascript 复制代码

flushSync(() => {
  setTodos([ ...todos, newTodo]);
});
listRef.current.lastChild.scrollIntoView();