React18 新特性

自动批量更新State

定义

import { useState } from 'react'

const [x, setX] = useState(0)

渲染赋值

setX(5)

并发CM模式

同步不可中断更新机制 -> 异步可中断并行状态更新机制

React18 默认开启并发模式

详见代码

ReactDOM 的引入

import ReactDOM from 'react-dom/client'

render

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(<App />)

useTransition

startTransition 函数可以将 state 更新标记为非阻塞的 transition

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

useTransition 是一个让你在不阻塞 UI 的情况下来更新状态的 React Hook

isPending 标志，告诉你是否存在待处理的转换

startTransition 函数允许你将状态更新标记为转换状态

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

除了将任务变成非紧急，还有节流的效果

useDeferredValue

useDeferredValue 是一个 React Hook，可以让你延迟更新 UI 的某些部分

在新内容加载期间显示旧内容。
表明内容已过时
延迟渲染 UI 的某些部分

useDeferredValue(value)

value：你想延迟的值，可以是任何类型

import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  // ...
}

严格模式

React 提供了 “严格模式”，在严格模式下开发时，它将会调用每个组件函数两次。通过重复调用组件函数，严格模式有助于找到违反这些规则的组件。

严格模式在生产环境下不生效，因此它不会降低应用程序的速度。如需引入严格模式，你可以用 <React.StrictMode> 包裹根组件。一些框架会默认这样做

index.js 页面

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
	<React.StricMode>
		<App />
	</React.StricMode>
)

Suspense组件的变化

<Suspense> 允许你显示一个退路方案（fallback）直到它的子组件完成加载

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

React18 可以不设置 fallback

其他

如果React 返回一个空组件， React17 只允许返回 null 。React18 也允许返回undefined。