面试常问的-React 18的新特性

2022年3月发布的React 18带来了一系列新特性和更新,极大地增强了React应用程序的功能和性能。这个版本为并发渲染奠定了基础,这是React未来更新的基石。下面我们来深入了解React 18的关键特性和变化,包括技术细节和代码示例。

升级到React 18

要开始使用React 18,请使用npm或yarn安装最新版本的react和react-dom:

npm install react react-dom

将ReactDOM.render转换成ReactDOM.createRoot,如下所示:

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');
const root = ReactDOM.createRoot(container);
root.render(<App />);

并发渲染

并发渲染是React 18的主要特性。它允许React同时处理多个渲染任务。例如,在等待数据加载时,React可以暂停渲染一个组件,并开始处理另一个任务。这个特性是React未来功能的基础。

示例:

import { unstable_createRoot } from 'react-dom';

const root = unstable_createRoot(document.getElementById('app'));
root.render(<App />);

自动批处理

React 18中的自动批处理通过将多个状态更新合并到一个渲染过程中来减少重新渲染的次数。此特性现在包括promise、超时和事件处理程序中的更新。

React 18之前:

fetch('/data').then(() => {
  setCount(c => c + 1); // 每个都会引起重新渲染 
  setFlag(f => !f); 
});

React 18:

fetch('/data').then(() => {
  setCount(c => c + 1); // 单次重新渲染两个
  setFlag(f => !f);
});

过渡

React 18中的过渡有助于管理状态更新的优先级。使用startTransition,您可以将某些更新标记为不那么紧急,允许React在有更加迫切的渲染要执行时延迟这些更新。

示例:

import { startTransition } from 'react';

function handleSearch(input) {
  setInputValue(input); // 紧急:立即更新输入字段
  startTransition(() => {
    setSearchQuery(input); // 非紧急:更新搜索结果
  });  
}

服务器端Suspense

React 18引入了对服务器端Suspense的支持。这允许服务器渲染的应用程序将HTML流式传输到浏览器中,从而提高加载性能和用户体验。

示例:

import { Suspense } from 'react';

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ExpensiveComponent />
    </Suspense>
  );  
}

严格模式更新

React 18的严格模式现在包括额外的检查和模拟组件的卸载和重新挂载,有助于确保组件正确清理和重置其状态。

示例:

import React from 'react';

function MyApp() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

React 18引入了一套强大的特性和改进,为更高性能和更高效的React应用程序奠定了基础。通过并发渲染、自动批处理、过渡、服务器端暂停和严格模式增强,React 18对该框架而言是一个重要的进步。