React 18 引入了多項(xiàng)令人興奮的新特性，其中 startTransition 和 useTransition 是并發(fā)模式（Concurrent Mode）中的關(guān)鍵部分，旨在提升用戶(hù)體驗(yàn)，通過(guò)區(qū)分緊急和非緊急任務(wù)來(lái)優(yōu)化應(yīng)用的響應(yīng)性。本文將詳細(xì)介紹這兩個(gè)特性及其在實(shí)際開(kāi)發(fā)中的應(yīng)用。

一、并發(fā)模式與任務(wù)優(yōu)先級(jí)

在 React 18 之前，所有的狀態(tài)更新都是同步處理的，這意味著一旦狀態(tài)改變，組件就會(huì)立即重新渲染。這可能導(dǎo)致在處理大量數(shù)據(jù)或復(fù)雜視圖時(shí)，界面出現(xiàn)卡頓現(xiàn)象，影響用戶(hù)體驗(yàn)。

并發(fā)模式的引入，使得 React 能夠以不同的優(yōu)先級(jí)處理狀態(tài)更新，從而保持界面的流暢性。緊急任務(wù)（如用戶(hù)輸入、點(diǎn)擊等）會(huì)被立即處理，而非緊急任務(wù)（如數(shù)據(jù)過(guò)濾、分頁(yè)切換等）則會(huì)被延遲處理。

React 18 引入的 startTransition 和 useTransition 旨在解決這類(lèi)問(wèn)題。它們?cè)试S開(kāi)發(fā)者將一些非關(guān)鍵的狀態(tài)更新標(biāo)記為過(guò)渡性更新，從而將其優(yōu)先級(jí)降低，讓 React 在主線程空閑時(shí)再去處理這些更新，確保關(guān)鍵的用戶(hù)交互（如點(diǎn)擊、滾動(dòng)、輸入等）能夠得到及時(shí)響應(yīng)，使應(yīng)用始終保持流暢和可用。

二、startTransition 的使用

（一）基本語(yǔ)法與用法

startTransition 是一個(gè) API，用于標(biāo)記某些狀態(tài)更新為非緊急任務(wù)。它允許開(kāi)發(fā)者在不影響用戶(hù)交互的情況下，延遲處理一些低優(yōu)先級(jí)的更新。

import React, { useState, startTransition } from 'react';

const App = () => {
  // 用于存儲(chǔ)輸入框數(shù)據(jù)的狀態(tài)
  const [inputValue, setInputValue] = useState('');
  // 用于存儲(chǔ)處理后數(shù)據(jù)的狀態(tài)
  const [processedData, setProcessedData] = useState('');

  const handleInputChange = (e) => {
    const newData = e.target.value;
    setInputValue(newData);
    startTransition(() => {
      // 這里模擬對(duì)輸入數(shù)據(jù)進(jìn)行一些耗時(shí)處理，比如拼接一個(gè)長(zhǎng)字符串
      const processed = newData + ', processed and modified. This is a long text to simulate a heavy operation. '.repeat(1000);
      setProcessedData(processed);
    });
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} placeholder="Enter something" />
      <p>Input: {inputValue}</p>
      <p>Processed Data: {processedData}</p>
    </div>
  );
};

export default App;

在這個(gè)示例中，當(dāng)用戶(hù)在輸入框中輸入內(nèi)容時(shí)，inputValue 會(huì)立即更新以反映用戶(hù)輸入。同時(shí)，startTransition 會(huì)將對(duì) processedData 的更新操作標(biāo)記為過(guò)渡性更新。這意味著，即使處理 processedData 的過(guò)程可能比較耗時(shí)（如模擬的長(zhǎng)字符串拼接），用戶(hù)界面在這個(gè)過(guò)程中仍然可以響應(yīng)其他操作，比如繼續(xù)輸入文本，而不會(huì)出現(xiàn)卡頓現(xiàn)象，直到主線程有空閑時(shí)間來(lái)處理 processedData 的更新并在界面上顯示最終結(jié)果。

（二）內(nèi)部工作原理

當(dāng) startTransition 被調(diào)用時(shí)，React 會(huì)將傳入的更新函數(shù)放入一個(gè)低優(yōu)先級(jí)的任務(wù)隊(duì)列中。它會(huì)首先處理完當(dāng)前正在進(jìn)行的高優(yōu)先級(jí)任務(wù)（如用戶(hù)的即時(shí)交互操作對(duì)應(yīng)的更新），然后在主線程有空閑時(shí)間時(shí)，才會(huì)從低優(yōu)先級(jí)任務(wù)隊(duì)列中取出這些過(guò)渡性更新任務(wù)并執(zhí)行。這樣就有效地避免了因大量數(shù)據(jù)更新或復(fù)雜計(jì)算導(dǎo)致的界面卡頓，使得應(yīng)用在更新過(guò)程中依然能夠響應(yīng)用戶(hù)的其他操作。

三、useTransition 的使用

（一）基本語(yǔ)法與返回值

useTransition 是一個(gè) React Hook，它在函數(shù)組件中使用。其語(yǔ)法如下：

import { useTransition } from'react';
const [isPending, startTransition] = useTransition();

它返回一個(gè)包含兩個(gè)元素的數(shù)組。第一個(gè)元素 isPending 是一個(gè)布爾值，表示當(dāng)前是否有過(guò)渡性更新正在進(jìn)行。第二個(gè)元素 startTransition 與前面提到的全局 startTransition 函數(shù)功能相同，用于標(biāo)記狀態(tài)更新為過(guò)渡性更新。

（二）在組件中的應(yīng)用示例

以下是一個(gè)更完整的示例，展示了 useTransition 在一個(gè)搜索組件中的應(yīng)用：

import React, { useState, useTransition } from "react";
import { Input, Spin, List } from "antd";

const { Search } = Input;

// 生成 1000 條模擬數(shù)據(jù)
const mockData = [];
for (let i = 1; i <= 1000; i++) {
  mockData.push({
    id: i,
    name: `Item ${i}`,
    description: `This is the description of item ${i}`
  });
}

const App = () => {
  // 搜索關(guān)鍵詞狀態(tài)
  const [searchQuery, setSearchQuery] = useState("");
  // 搜索結(jié)果狀態(tài)
  const [searchResults, setSearchResults] = useState(mockData);
  // 通過(guò) useTransition 獲取 startTransition 和 isPending
  const [isPending, startTransition] = useTransition();

  const handleSearch = (value) => {
    setSearchQuery(value);
    startTransition(() => {
      // 模擬異步搜索操作
      const newResults = mockData.filter((item) =>
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setSearchResults(newResults);
    });
  };

  return (
    <div>
      <Search
        placeholder="Search..."
        onChange={(e) => handleSearch(e.target.value)}
        enterButton
      />
      {isPending && (
        <Spin
          style={{
            marginTop: 16,
            textAlign: "center"
          }}
        />
      )}
      <List
        bordered
        dataSource={searchResults}
        renderItem={(item) => (
          <List.Item key={item.id}>
            <List.Item.Meta
              title={item.name}
              description={item.description}
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default App;

在上述代碼中，當(dāng)用戶(hù)在搜索框中輸入內(nèi)容并執(zhí)行搜索時(shí)，會(huì)在模擬的異步搜索操作中過(guò)濾數(shù)據(jù)，并根據(jù) useTransition 的狀態(tài)顯示 Spin 加載組件或搜索結(jié)果列表。這樣在搜索大數(shù)據(jù)量時(shí)，能夠利用 useTransition 來(lái)優(yōu)化用戶(hù)體驗(yàn)，避免界面卡頓。

四、應(yīng)用場(chǎng)景

startTransition 和 useTransition 非常適合用于以下場(chǎng)景：

• 搜索和過(guò)濾：當(dāng)用戶(hù)輸入關(guān)鍵詞進(jìn)行搜索或過(guò)濾時(shí)，可以立即更新輸入框的值，并延遲更新搜索結(jié)果。
• 復(fù)雜視圖：在處理包含大量數(shù)據(jù)的復(fù)雜視圖時(shí)，可以使用 startTransition 延遲更新，以保持界面的流暢性。
• 分頁(yè)切換：在分頁(yè)切換時(shí)，可以立即更新頁(yè)碼，并延遲加載新頁(yè)面的數(shù)據(jù)。

五、避免過(guò)度使用與性能平衡

雖然 startTransition 和 useTransition 能夠有效提升用戶(hù)體驗(yàn)，但也不能過(guò)度依賴(lài)。過(guò)多的過(guò)渡性更新可能會(huì)導(dǎo)致低優(yōu)先級(jí)任務(wù)隊(duì)列積壓，最終影響整體性能。在設(shè)計(jì)應(yīng)用時(shí)，需要合理評(píng)估哪些狀態(tài)更新是真正適合標(biāo)記為過(guò)渡性的，并且結(jié)合其他性能優(yōu)化策略，如數(shù)據(jù)分頁(yè)、緩存機(jī)制、虛擬列表等，以達(dá)到最佳的性能平衡。

到此這篇關(guān)于React18中startTransition與useTransition的使用的文章就介紹到這了,更多相關(guān)React18 startTransition useTransition內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論