第1课_React18概述
热度🔥:64 免费课程
授课语音
了解 React18 的新特性与改进
React18 引入了一些非常重要的特性和改进,使得开发者能够更轻松地开发高效、响应式的应用。React18 主要集中在并发渲染、自动批处理、Suspense 等方面的改进,这些新特性可以显著提升应用的性能和开发体验。
1. 并发渲染(Concurrent Rendering)
React18 引入了并发渲染的概念,允许 React 在后台渲染多个任务而不会阻塞用户界面。并发渲染的最大优势是让 React 在需要时能够打断当前的渲染工作,以保证用户交互的流畅性。
1.1 如何启用并发渲染
在 React18 中,可以通过 createRoot
API 来启用并发渲染。
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);
通过 ReactDOM.createRoot
创建根节点,并启用并发模式,所有子组件都将在并发模式下运行。
1.2 并发渲染的优势
- 提高应用的响应性:即使在繁重的渲染任务中,React 也能优先处理重要的用户交互,确保界面始终流畅。
- 后台渲染:React 在后台渲染不需要展示的部分,避免界面卡顿或延迟。
2. 自动批处理(Automatic Batching)
React18 引入了自动批处理功能,能够自动将多个状态更新合并成一个渲染过程,这样可以减少不必要的重渲染,提高应用性能。
2.1 自动批处理的工作原理
在 React18 中,自动批处理不仅限于事件处理,还扩展到了其他异步操作,如 setTimeout
、Promise
等。
代码示例
// App.tsx
import React, { useState } from 'react';
const App: React.FC = () => {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
const handleClick = () => {
setCount(count + 1);
setName('React 18');
};
console.log('Render count:', count, 'name:', name);
return (
<div>
<p>Count: {count}</p>
<p>Name: {name}</p>
<button onClick={handleClick}>Update</button>
</div>
);
};
export default App;
在 React18 中,即使 setCount
和 setName
在同一事件处理函数中分别被调用,React 会自动将它们合并为一个渲染周期。
3. Suspense 和 Suspense 服务器端渲染(Suspense & SSR)
React18 对 Suspense
进行了改进,支持更灵活的异步组件加载和服务器端渲染(SSR)。
3.1 Suspense 用于异步加载组件
Suspense
用于异步加载 React 组件,能在组件加载过程中提供加载指示器。
代码示例
// ProductList.tsx
import React, { Suspense } from 'react';
const ProductCard = React.lazy(() => import('./ProductCard'));
const ProductList: React.FC = () => {
return (
<div>
<h1>Product List</h1>
<Suspense fallback={<div>Loading...</div>}>
<ProductCard />
</Suspense>
</div>
);
};
export default ProductList;
- 使用
React.lazy
延迟加载ProductCard
组件。 Suspense
包裹需要异步加载的组件,并提供加载状态的fallback
属性。
3.2 Suspense 与服务器端渲染(SSR)
React18 使得 Suspense
能够与服务器端渲染结合使用,从而实现更高效的 SSR。
// 服务器端渲染时,可以使用 Suspense
import React, { Suspense } from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';
const html = ReactDOMServer.renderToString(
<Suspense fallback={<div>Loading...</div>}>
<App />
</Suspense>
);
console.log(html); // 输出渲染结果
- 在服务器端渲染时,
Suspense
会等待组件完成加载后再渲染,从而提升服务器渲染效率。
4. Transitions(过渡)
React18 引入了 Transitions
API,用于管理用户界面中不影响交互的状态变化。过渡使得界面更新更平滑,避免过于频繁的渲染。
4.1 使用过渡 API
通过 startTransition
API,我们可以将不影响用户交互的更新标记为过渡,从而让 React 优先处理这些任务。
代码示例
// App.tsx
import React, { useState, startTransition } from 'react';
const App: React.FC = () => {
const [isPending, setIsPending] = useState(false);
const [inputValue, setInputValue] = useState('');
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
startTransition(() => {
setInputValue(newValue);
});
setIsPending(true);
};
return (
<div>
<input value={inputValue} onChange={handleChange} />
{isPending && <p>Loading...</p>}
</div>
);
};
export default App;
- 使用
startTransition
包裹setInputValue
,将该更新标记为过渡更新,React 会在空闲时间更新 UI。
5. 总结
React18 引入了许多新的特性,使得 React 应用的性能和开发体验得到了极大的提升:
- 并发渲染:提升用户交互的流畅度,避免渲染阻塞。
- 自动批处理:减少不必要的渲染,提升性能。
- Suspense 和 SSR:更高效的异步加载和服务器端渲染。
- Transitions:平滑过渡状态更新,提升用户体验。
React18 的这些新特性为开发者提供了更多的工具,以构建更高效、响应式的 Web 应用。