React18 新特性

React18 新特性

自动批量更新State

定义

import { useState } from 'react'

const [x, setX] = useState(0)
1
2
3

渲染赋值

setX(5)
1

并发CM模式

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

React18 默认开启并发模式

详见代码

1. ReactDOM 的引入

import ReactDOM from 'react-dom/client'
1

2. render

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

root.render()
1
2
3

useTransition

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

import { startTransition } from 'react';

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

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13

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

useDeferredValue

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

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

useDeferredValue(value)

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

import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  // ...
}
1
2
3
4
5
6
7

严格模式

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

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

index.js 页面

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

root.render(
	
		
	
)
1
2
3
4
5
6
7

Suspense组件的变化

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

}>
  

1
2
3

React18 可以不设置 fallback

其他

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