客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
React 是一个开源 JavaScript 库，开发人员使用它来创建基于 Web 和移动的应用程序，并且支持构建交互式用户界面和 UI 组件。React 是由 Facebook 软件工程师 Jordan Walke 创建，React 的第一个版本在七年前问世，现在，Facebook 负责维护。React框架自首次发布以来，React 的受欢迎程度直线飙升，热度不减。 简要说明， Concurrent Mode 和Suspense 可以使用户无缝处理数据加载，加载状态，用户界面操作更加平滑和无缝切换。 在Concurrent Mode 下，React可以暂停高消耗的，非紧急的组件的渲染，并聚焦在更加紧迫的任务处理，如UI 渲染，始终保持应用为可响应式，避免白屏，卡顿等现象。 本文主要分享深入了解Concurrent Mode 和Suspense 模式下的数据提取功能。 为什么需要 Concurrent Mode？众所周知，JavaScript 框架或库是单线程的工作。因此，当一个代码块运行时，其余的块必须等待执行。无法并发执行多线程工作。界面渲染也是一样的。 具体问题假如，我们需要显示一个很长的可选列表用于过滤产品的应用程序。我们使用搜索框用于过滤记录，设计方案是当用户点击搜索按钮后，用户界面需要重新刷新列出相关联的数据。 如果列表过长，数据过多，UI“卡顿”，即渲染对用户可见。这种卡顿也会大大降低产品性能。开发人员可以使用一些技术，如节流和防抖，这些技术会有一定帮助，但不是完美的解决方案。 防抖会在预定的时间内忽略对函数的调用。函数调用仅在经过预定时间后进行。 下图描述了卡顿现象： 无中断渲染通过可中断渲染，React.js 在处理和重新渲染列表时不会阻塞 UI。它通过暂停琐碎的工作、更新 DOM 并确保 UI 不会卡顿，使 React.js 更加细化。React 使用用户输入并行更新或重绘输入框。React 使用用户输入并重绘输入框并行执行。它还更新内存中的列表。React 完成更新后，它会更新 DOM 并在用户的显示器上重新呈现列表。本质上，无中断渲染使 React 能够“多任务”。此功能提供了更流畅的 UI 体验。 并发模式并发模式是一组功能，可帮助 React 应用程序保持响应并平滑地适应用户的设备和网络速度能力。并发模式将其拥有的任务划分为更小的块。 React 的调度程序可以挑选并选择要执行的作业。作业的调度取决于它们的优先级。通过对任务进行优先级排序，它可以停止琐碎或不紧急的事情，或者进一步推动它们。 React 始终将用户界面更新和渲染放在首位。 使用并发模式，我们可以：
随着 UI 渲染，并发模式改进了对传入数据的响应，懒加载控件，异步处理过程。并发模式保证了用户界面始终处于激活状态，并且持续在后台更新数据，并发模式也始终使用React 的两个钩挂： 使用
const deferredValue = useDeferredValue(value, { timeoutMs: <some value> });
此命令设置值在 使用 Transition Hook
const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });
<button disabled={isPending}
startTransition(() => {
<fetch Calls>
});
</button>
{isPending? " Loading...": null}
使用 为获取数据的Suspense
使用 1.数据获取库和 2.控制视觉加载状态 3.避免竞争条件
import Spinner from './Spinner';
<Suspense fallback={<Spinner />}>
<SomeComponent />
</Suspense>
Suspense 和 懒加载组件
启用并发模式 要启用并发模式，请安装最新的测试版本。安装 React 的先决条件是节点数据包管理器 (npm)。要安装测试版本，请执行以下命令： npm install react@experimental react-dom@experimental 要测试是否设置了测试版本，请创建一个示例 React 应用程序。没有测试功能的渲染代码如下：
import * as React from 'react';
import { render } from 'react-dom';
render(<App />, document.getElementById('root'));
并发模式的，具体代码如下：
import * as React from 'react';
import { createRoot } from 'react-dom';
createRoot(document.getElementById('root')).render(<App />);
这将为整个应用程序启用并发模式。React 将渲染调用分为两部分：
目前，React 计划维护三种模式：
阻塞模式是使用createBlockingRoot 调用来替换createRoot 调用，在并发模式的开发情况下，阻塞模式为开发者提供了机会来修复bug或解决问题。 React 官方文档中也说明了每种模式支持的功能： 示例应用：本文也创建了一个测试程序来验证并发模式和其他模式的用法和效果。本文以像素应用为例在150*150的画布上随机分布像素并包含一个搜索框，每次用户点击搜索框时候，画布会重新渲染自己。 构建像素应用程序的主要文件是 canvas.js。我们还制作了一个输入框，用户可以在其中输入任何内容。每次按下一个键都会重新渲染像素画布。 代码示例：Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// Traditional or non-Concurrent Mode react
const rootTraditional = document.getElementById("root");
ReactDOM.render(<App caption="Traditional or Block Rendering" />,
rootTraditional);
// Concurrent Mode enabled
const rootConcurrent = document.getElementById("root-concurrent");
ReactDOM.createRoot(rootConcurrent).render(<App caption="Interruptible
Rendering" />);
App.js
import React, { useState, useDeferredValue } from "react";
import "./App.css";
import { Canvas } from "./Canvas";
export default function App(props)
{ const [value, setValue] = useState("");
//This is available only in the Concurrent mode.
const deferredValue = useDeferredValue(value, {
timeoutMs: 5000
});
const keyPressHandler = e => {
setValue(e.target.value);
};
return (
<div className="App">
<h1>{props.caption}</h1>
<input onKeyUp={keyPressHandler} />
<Canvas value={deferredValue} />
</div>
);
}
Canvas.js
import React from "react";
const CANVAS_SIZE = 70;
const generateRandomColor = () => {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
const createCanvas = (rows, columns) => {
let array = [];
for (let i = 0; i < rows; i++) {
let row = [];
for (let j = 0; j < columns; j++) {
row.push(0);
}
array.push(row);
}
return array;
};
//This is the square with the pixels
const drawCanvas = value => {
const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE);
return canvas.map((row, rowIndex) => {
let cellsArrJSX = row.map((cell, cellIndex) => {
let key = rowIndex + "-" + cellIndex;
return (
<div
style={{ backgroundColor: generateRandomColor() }}
className="cell"
key={"cell-" + key}
/>
);
});
return (
<div key={"row-" + rowIndex} className="canvas-row">
{cellsArrJSX}
</div>
);
});
};
export const Canvas = ({ value }) => {
return (
<div>
<h2 style={{ minHeight: 30 }}>{value}</h2>
<div className="canvas">{drawCanvas(value)}</div>
</div>
);
};
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<title>React App Concurrent Mode</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="container">
<div id="root" class="column"></div>
<div id="root-concurrent" class="column"></div>
</div>
</body>
</html>
运行示例让我们看看我们的代码。我们看到的第一个屏幕是初始屏幕。使用传统或块渲染是现在React 的做法。可中断渲染是并发模式的测试功能。我们先看看传统的渲染工作。 像素画布在每次击键时重新渲染。在传统渲染中，整个 UI 会在每次击键时暂停，直到它可以重新渲染屏幕。在此期间，即使我们继续打字，用户输入不会更新。 下图显示可中断渲染。在可中断渲染中，用户可以继续输入。在为每次击键并行重新渲染画布时，UI 不会停止或停止。 重新渲染完成后，React 会更新 UI。虽然在静态截图中很难看到，但我们可以看到网格在变化，但用户仍然可以打字而不会出现 UI 卡顿的情况。 总结在本文中，我们研究了 React 的测试并发功能和 Suspense。使用并发模式，React.js 始终保持用户界面响应。它将应用程序的任务分解为更小的块，并允许对用户界面任务进行优先级排序。因此，此模式可提供更流畅和无缝的用户体验，并提高应用程序的整体性能。 结合并发模式，Suspense 允许用户界面保持响应。同时，数据获取等繁重耗时的任务可以并行完成，从而提供整体无缝体验。 有关并发模式的完整详细信息可在 React 官方文档中了解。 到此这篇关于React 并发功能体验-前端的并发模式已经到来的文章就介绍到这了,更多相关React 并发功能内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论