React 18完全指南：新特性、并发模式与升级攻略

// React会自动将这两个状态更新合并为一次渲染
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React只会re-render一次
}

// React 18之前：只在事件处理器中批处理
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 自动批处理，只渲染一次
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 不会批处理，会渲染两次
}, 1000);

// React 18：所有场景都自动批处理
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 自动批处理，只渲染一次
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 自动批处理，只渲染一次
}, 1000);

// Promise同样适用
fetch('/api').then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 自动批处理，只渲染一次
});

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // DOM已经更新

  flushSync(() => {
    setFlag(f => !f);
  });
  // DOM已经更新
}

import { startTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleChange(e) {
    const value = e.target.value;

    // 紧急更新：立即更新输入框
    setQuery(value);

    // 标记为过渡更新：搜索结果可以延迟
    startTransition(() => {
      setResults(searchData(value));
    });
  }

  return (
    <input value={query} onChange={handleChange} />
  );
}

import { useTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    const value = e.target.value;

    setQuery(value);

    startTransition(() => {
      setResults(searchData(value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <ResultsList results={results} />
    </div>
  );
}

import { useDeferredValue } from 'react';

function SearchResults({ query }) {
  // query的变化会被标记为非紧急
  const deferredQuery = useDeferredValue(query);

  const results = useMemo(() => {
    return searchData(deferredQuery);
  }, [deferredQuery]);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ResultsList results={results} />
    </div>
  );
}

// 传统SSR：必须等待所有数据准备好才能返回
// React 18 SSR：可以流式返回，逐步交付

function App() {
  return (
    <Layout>
      <NavBar />
      <Sidebar />
      <RightPane>
        <Post />
        <Suspense fallback={<Spinner />}>
          <Comments />
        </Suspense>
      </RightPane>
    </Layout>
  );
}

function handleFilterChange(filter) {
  // 标记为过渡更新
  startTransition(() => {
    setFilter(filter);
  });
}

// 如果在过渡期间suspend，React会继续显示当前内容
// 而不是显示fallback
<Suspense fallback={<Loading />}>
  <FilterResults filter={filter} />
</Suspense>

import { useId } from 'react';

function PasswordInput() {
  const passwordId = useId();
  const hintId = useId();

  return (
    <div>
      <label htmlFor={passwordId}>Password</label>
      <input id={passwordId} type="password" />
      <p id={hintId}>Must be at least 8 characters</p>
    </div>
  );
}

import { useSyncExternalStore } from 'react';

// 订阅外部store
function useStore(store) {
  return useSyncExternalStore(
    store.subscribe,    // 订阅函数
    store.getSnapshot,  // 客户端获取快照
    store.getServerSnapshot // 服务端获取快照
  );
}