React 18新特性

1. 并发渲染 (Concurrent Rendering) NEW

并发渲染是React 18最重要的特性，它允许React同时准备多个版本的UI。

并发渲染的优势：

• 可中断渲染：高优先级更新可以中断低优先级渲染
• 状态复用：React可以在后台准备新的UI而不影响当前界面
• 更好的响应性：用户交互不会被长任务阻塞
• 选择性水合：SSR页面可以逐步变得可交互

使用并发特性

import { startTransition } from 'react';

// 将非紧急的更新标记为"transition"
function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleSearch(value) {
    setQuery(value); // 紧急更新：立即执行

    // 非紧急更新：使用startTransition包裹
    startTransition(() => {
      // 获取搜索结果（可能是耗时的操作）
      fetchResults(value).then(data => {
        setResults(data);
      });
    });
  }

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

并发模式 vs 传统模式

2. 自动批处理 (Automatic Batching) 改进

React 18扩展了批处理的范围，现在包括事件处理器、Promise、setTimeout和原生事件处理程序中的状态更新。

React 17中的批处理

// React 17：只在React事件处理程序中批处理
function handleClick() {
  setCount(c => c + 1); // 重新渲染
  setFlag(f => !f); // 重新渲染
  // 结果：只重新渲染一次（批处理）
}

// React 17：异步代码中不会批处理
setTimeout(() => {
  setCount(c => c + 1); // 重新渲染
  setFlag(f => !f); // 重新渲染
  // 结果：重新渲染两次（无批处理）
}, 1000);

// React 17：Promise中不会批处理
fetch('/api/data').then(() => {
  setCount(c => c + 1); // 重新渲染
  setFlag(f => !f); // 重新渲染
  // 结果：重新渲染两次（无批处理）
});

React 18中的自动批处理

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

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 结果：只重新渲染一次（React 18新行为）
}, 1000);

fetch('/api/data').then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 结果：只重新渲染一次（React 18新行为）
});

// 如果需要立即重新渲染（不推荐），可以使用flushSync
import { flushSync } from 'react-dom';

flushSync(() => {
  setCount(c => c + 1); // 立即重新渲染
});
setFlag(f => !f); // 另一次重新渲染

3. 新的Hooks API NEW

useTransition

标记非紧急的状态更新，允许用户界面在更新进行时保持响应。

import { useTransition } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  const [filter, setFilter] = useState('');
  const [results, setResults] = useState(initialResults);

  function handleFilterChange(value) {
    // 紧急：立即更新输入框
    setFilter(value);

    // 非紧急：搜索结果可以稍后更新
    startTransition(() => {
      setResults(computeExpensiveResults(value));
    });
  }

  return (
    <div>
      <input
        value={filter}
        onChange={(e) => handleFilterChange(e.target.value)}
      />
      {isPending && <Spinner />}
      <ResultsList results={results} />
    </div>
  );
}

useDeferredValue

延迟更新某个值，类似于防抖，但更适合React的渲染模型。

import { useDeferredValue } from 'react';

function SearchResults({ query }) {
  // query是紧急更新，deferredQuery是非紧急更新
  const deferredQuery = useDeferredValue(query);

  // 根据延迟的值进行昂贵的计算
  const suggestions = useMemo(() => {
    return computeSuggestions(deferredQuery);
  }, [deferredQuery]);

  return (
    <>
      <SearchInput query={query} />
      <SuggestionList suggestions={suggestions} />
    <>
  );
}

useId

生成在服务端和客户端之间稳定的唯一ID，用于无障碍属性。

import { useId } from 'react';

function EmailForm() {
  const id = useId();

  return (
    <>
      <label htmlFor={`${id}-email`}>邮箱</label>
      <input id={`${id}-email`} type="email" />

      <label htmlFor={`${id}-name`}>姓名</label>
      <input id={`${id}-name`} type="text" />
    </>
  );
}

// 在SSR和CSR中生成的ID保持一致
// SSR: :r1:-email, :r1:-name
// CSR: :r1:-email, :r1:-name

useSyncExternalStore

用于在并发渲染中安全地从外部数据源读取数据。

import { useSyncExternalStore } from 'react';

function useOnlineStatus() {
  const isOnline = useSyncExternalStore(
    subscribe, // 订阅函数
    getSnapshot, // 获取当前快照
    getServerSnapshot // 服务端快照（SSR时使用）
  );

  return isOnline;
}

// 具体实现
function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

function getSnapshot() {
  return navigator.onLine;
}

function getServerSnapshot() {
  return true; // 服务端渲染时的默认值
}

useInsertionEffect

在DOM变更前同步执行，主要用于CSS-in-JS库。

import { useInsertionEffect } from 'react';

// 供CSS-in-JS库使用，普通应用很少需要
function useCSS(rule) {
  useInsertionEffect(() => {
    // 在DOM变更前注入样式
    const style = document.createElement('style');
    style.textContent = rule;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  });

  return rule;
}

4. 服务器端渲染改进 NEW

新的流式SSR API

// React 18之前的SSR
import { renderToString } from 'react-dom/server';
import App from './App';

// 阻塞式渲染
const html = renderToString(<App />);
res.send(\`
  <!DOCTYPE html>
  <html>
    <body>
      <div id="root">\${html}</div>
      <script src="/client.js"></script>
    </body>
  </html>
\`);

// React 18的流式SSR
import { renderToPipeableStream } from 'react-dom/server';
import App from './App';

app.get('/', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    // Bootstrap脚本
    bootstrapScripts: ['/main.js'],
    // 完成回调
    onShellReady() {
      res.setHeader('Content-type', 'text/html');
      res.write(\`
        <!DOCTYPE html>
        <html>
          <body>
            <div id="root">
      \`);
      pipe(res);
      res.write(\`
            </div>
          </body>
        </html>
      \`);
    },
    onShellError(error) {
      // 错误处理
      res.status(500).send('<h1>出错了</h1>');
    }
  });
});

选择性水合 (Selective Hydration)

import { hydrateRoot } from 'react-dom/client';
import App from './App';

// React 18之前：整个应用一次性水合
hydrate(document.getElementById('root'), <App />);

// React 18：支持选择性水合
const root = hydrateRoot(document.getElementById('root'), <App />);

// 使用Suspense实现部分水合
function App() {
  return (
    <html>
      <head>
        <title>我的应用</title>
      </head>
      <body>
        <Header />
        <Sidebar />
        <main>
          <Suspense fallback={<Spinner />}>
            <Content /> {/* 这个组件可以延迟水合 */}
          </Suspense>
        </main>
        <Footer />
      </body>
    </html>
  );
}

服务端 Suspense

// 组件可以在服务端使用Suspense
async function Content() {
  // 模拟数据获取
  const data = await fetchData();
  return <div>{data}</div>;
}

function App() {
  return (
    <div>
      <Header />
      <Suspense fallback={<div>加载中...</div>}>
        <Content />
      </Suspense>
    </div>
  );
}

// 服务端渲染时，Content组件会先渲染fallback
// 当数据准备好后，再发送实际的HTML

5. 严格模式增强 改进

开发环境下的双重调用

// React 18严格模式在开发环境下：
// 1. 组件会挂载两次
// 2. Effect会运行两次
// 目的是帮助发现副作用相关问题

function MyComponent() {
  console.log('组件渲染'); // 开发环境会打印两次

  useEffect(() => {
    console.log('Effect运行'); // 开发环境会运行两次
    return () => {
      console.log('Effect清理'); // 也会运行两次
    };
  }, []);

  return <div>Hello</div>;
}

// 正确应对双重调用的方式：
function MyComponent() {
  const ref = useRef(null);

  useEffect(() => {
    // 使用ref确保只执行一次
    if (ref.current) return;
    ref.current = true;

    // 实际的副作用逻辑
    const subscription = dataSource.subscribe();

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  // 或者使用idempotent操作
  useEffect(() => {
    // 幂等操作：多次执行结果相同
    document.title = '我的页面';
  }, []);
}

严格模式检测的问题类型

• 不安全的生命周期：componentWillMount, componentWillUpdate, componentWillReceiveProps
• 遗留的字符串ref：使用ref="myRef"
• 遗留的context API：使用旧的context API
• 意外的副作用：组件渲染不应该有副作用

React未来展望

React 18为未来的功能奠定了基础：

• 服务器组件：在服务端运行的React组件
• 资源加载优化：更智能的资源预加载
• 更好的开发者工具：并发渲染的可视化调试
• 更多并发特性：更细粒度的渲染控制