关于React的18版本

＜变更点＞
– 通过批处理渲染来提升性能
– 引入过渡效果

渲染批处理化

在React 18中，通过对多个状态更新进行批处理，实现了批量执行重新渲染。这意味着即使在同一个函数中存在多个useState的set函数，渲染也只会执行一次。以前存在的多个set函数导致重复渲染的问题已经得到解决。

function ExampleComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const handleClick = () => {
    setCount(count + 1);
    setText("Updated");
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <p>Count: {count}</p>
      <p>Text: {text}</p>
    </div>
  );
}

引入过渡

(note: Please note that the translation is in simplified Chinese)

React 18通过使用`useTransition`钩子和`startTransition`函数，可以控制异步渲染。这样就可以延迟渲染而不妨碍用户操作。在以前，用户操作导致的状态变化会立即渲染，但在React 18中，可以使用转换来暂停不必要的渲染。

import { useTransition, startTransition } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    startTransition(() => {
      setCount(count + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

在Suspense中进行服务器端渲染（SSR）

在React 18中，您可以使用组件来延迟在服务器端获取数据或渲染重型组件。这样一来，您可以异步地获取或渲染重型组件，同时在浏览器上显示其他部分的渲染。

function App() {
  return (
    <div>
      <Suspense fallback={<LoadingSpinner />}>
        <LazyComponent />
      </Suspense>
      <p>Other content</p>
    </div>
  );
}

海德

在React 18中，不需要等待页面内繁重的渲染，就可以进行操作。由于初始渲染时的与客户端的同步是异步执行的，所以用户可以快速进行交互操作。

本家React v18.0

非常易懂的文章：React 18的新功能和并行渲染的革命。