Day 15：React 18 新特性

Day 15：React 18 新特性

Automatic Batching

自动批量更新

// React 18 自动批量
setA(a => a + 1);
setB(b => b + 1);
// 自动合并为一次渲染！

---

Transitions

import { useTransition } from 'react';

function Search() {
  const [isPending, startTransition] = useTransition();
  
  function handleChange(e) {
    startTransition(() => {
      setResults(e.target.value);
    });
  }
}

---

Suspense 改进

<Suspense fallback={<Loading />}>
  <Comments />
</Suspense>

---

useId

生成稳定的唯一 ID

function Form() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Name</label>
      <input id={id} />
    </div>
  );
}

---

useOptimistic

乐观更新

function App() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );
  
  async function handleAdd(todo) {
    addOptimisticTodo(todo); // 立即更新
    await saveToServer(todo); // 后台保存
  }
}

---

自测答案

1. Automatic Batching：自动批量更新
2. Transitions：并发模式
3. useOptimistic：先显示结果再后台处理