React 18快速指南和核心概念解释

小柔

发布于 2023-10-14 17:07:59

2570

发布于 2023-10-14 17:07:59

文章被收录于专栏：小柔博客园小柔博客园

前言

React 18为并发渲染api奠定了基础，未来的React特性将在此基础上构建。这个版本主要关注性能的改进和渲染引擎的更新。

快速指引 Category | Feature | | ---------------------- | -------------------------------------------------------------------------------- | | 主题 | Concurrent React 并发 | | 支持 | Automatic Batching, Transitions, Suspense on the server | | API更新 | createRoot, hydrateRoot, renderToPipeableStream, renderToReadableStream | | Hooks | useId, useTransition, useDeferredValue, useSyncExternalStore, useInsertionEffect | | 更新 | Strict mode | | 弃用 | ReactDOM.render, renderToString

如何升级到React 18

从npm或yarn安装React 18和React DOM

npm install react react-dom

使用createRoot代替render

在index.js中，ReactDOM.render更新为ReactDOM.createRoot去创建root，并使用root -渲染你的应用

React 17 -

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

ReactDOM.render(<App />, container);

React 18 -

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// create a root
const root = ReactDOM.createRoot(container);

//render app to root
root.render(<App />);

核心：并发

假设我们需要给两个人打电话——爱丽丝和鲍勃。在非并发设置中，一次只能呼叫一个——首先呼叫Alice，结束，然后再呼叫Bob。

当与Alice呼叫需要等待很长时间时(例如on-hold)，其会浪费很多时间。如下图所示：

但是在并发设置中，如果呼叫Alice的过程中需要等待，那可以先呼叫Bob。这意味着可以同时有两个或更多的并发调用，并决定哪个调用更重要。

类似地，在具有并发渲染的React 18中，React可以中断、暂停、恢复或放弃渲染。这使得React能够快速响应用户交互。在React 18之前，渲染是一个单一的、不间断的、同步的事务，一旦渲染开始，就不能被中断。

并发性是React呈现机制的基本更新。并发性允许React中断呈现。React 18介绍了并发渲染的基础，并发渲染支持Suspense、流服务器渲染和转换等新特性。

新功能：批处理

React 18具有自动批处理功能。

在React中，当调用setState时，批处理有助于减少状态改变时重新呈现的数量。以前，是在事件处理程序中响应批处理状态更新，例如:

const handleClick = () => {
setCounter();
setActive();
setValue();
}

//re-rendered once at the end.

但是，在事件处理程序之外发生的状态更新不是批处理的。比如，有一个promise或进行网络调用，状态更新将不是批处理的。如-

fetch('/network').then( () => {
setCounter(); //re-rendered 1 times
setActive();  //re-rendered 2 times
setValue();   //re-rendered 3 times
});

//Total 3 re-renders

React 18引入了自动批处理功能，允许所有的状态更新——即使在promise、settimeout和事件回调中也是批处理的。这大大减少了React在后台需要做的工作。React将等待微任务完成后再重新渲染。

但如果想不使用这个功能，可以调用flushSync

新功能： Transitions

Transitions可用于标记不需要紧急进行更新的UI。例如:当在预先输入字段中输入时，会发生两件事——一个闪烁的光标显示输入内容的视觉反馈，以及一个搜索功能在后台搜索输入的数据。

向用户显示视觉反馈是重要的，因此是紧急的。搜索不是那么紧急，因此可以标记为非紧急。这些非紧急更新称为Transitions。通过将非紧急的UI更新标记为“Transitions”，React将知道哪些更新应该优先，从而更容易优化渲染并摆脱陈旧的渲染。

可以使用startTransition将更新标记为非紧急更新。下面是一个使用transitions -标记的typeahead组件的例子

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any non-urgent state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});