5月iOS設備性能榜：M1 M2依舊是榜單前五
和上個月一樣，沒有新品發(fā)布的iOS設備性能榜的上榜設備并沒有什么更替，僅僅只有跑分變化而產(chǎn)生的排名變動，剛剛開始的蘋果WWDC2023，推出的產(chǎn)品也依舊是新款Mac Pro、新款Mac Stu
React 18 引入的并發(fā)渲染（Concurrent Rendering）是一個革命性的特性，它改變了 React 應用的渲染方式，使得渲染過程更加高效且可控。
并發(fā)渲染的核心原理在于將渲染任務拆分為多個可中斷和可恢復的小任務，并根據(jù)優(yōu)先級進行調(diào)度。下面我們將通過代碼示例詳細解析 React 18 并發(fā)渲染的原理。
React 18 使用 Fiber 架構來管理渲染任務。Fiber 節(jié)點包含組件的類型、狀態(tài)、props 等信息，并且允許 React 在渲染過程中暫停和恢復。
Fiber 架構使用雙端隊列（work-in-progress tree 和 current tree）來管理渲染任務。當開始渲染時，React 會從根節(jié)點開始，遍歷組件樹并創(chuàng)建 Fiber 節(jié)點。
這些 Fiber 節(jié)點會被放入 work-in-progress tree 中，表示正在進行中的渲染任務。同時，current tree 中保存著上一次渲染的結果，用于在渲染過程中進行比對和更新。
下面是一個簡單的示例，展示如何使用 startTransition 來區(qū)分緊急和非緊急的更新任務：
import React, { useState, startTransition } from 'react';function App() { const [text, setText] = useState(''); const [isPending, setIsPending] = useState(false); const handleChange = (event) => { // 標記為非緊急更新開始 setIsPending(true); // 使用 startTransition 將更新放入待處理隊列 startTransition(() => { setText(event.target.value); // 假設這里還有其他非緊急的更新操作 }); // 立即更新pending狀態(tài)為false，表示非緊急更新已安排 setIsPending(false); }; return ( <div> <input value={text} onChange={handleChange} /> {isPending ? 'Updating...' : 'Ready'} </div> );}export default App;在上面的代碼中，當用戶輸入時，handleChange 函數(shù)會被調(diào)用。我們使用 setIsPending(true) 來標記一個非緊急更新的開始。然后，通過 startTransition，我們將實際的更新操作（設置輸入框的值）放入待處理隊列中。這個更新現(xiàn)在被標記為非緊急的，并將在瀏覽器空閑時執(zhí)行。最后，我們立即將 isPending 狀態(tài)更新為 false，以在界面上顯示“Updating...”狀態(tài)，告知用戶更新正在進行中。
并發(fā)渲染的另一個關鍵特性是中斷與恢復的能力。在渲染過程中，如果瀏覽器資源緊張或有其他高優(yōu)先級的任務需要執(zhí)行，React 可以暫停當前的渲染任務，釋放資源給更重要的任務。一旦資源變得可用，React 會恢復之前的渲染任務，并繼續(xù)執(zhí)行剩余的小任務。
這種中斷與恢復的能力使得 React 能夠更好地適應瀏覽器的資源狀況，避免長時間的阻塞和卡頓。它確保了即使在復雜的應用中，用戶也能獲得流暢且響應式的體驗。
時間切片允許 React 將長時間的渲染任務拆分成多個較短的時間片，以避免阻塞主線程。雖然 React 內(nèi)部自動管理時間切片，但開發(fā)者可以通過控制更新任務的優(yōu)先級來間接影響時間切片的分配。
在上面的示例中，通過 startTransition，我們實際上是在告訴 React：“這個更新不是非常緊急，你可以在其他高優(yōu)先級的任務完成后，或者瀏覽器空閑時再進行。”
React 18的并發(fā)渲染特性通過引入Fiber架構和startTransition等方法，實現(xiàn)了更加靈活和高效的渲染控制。它允許開發(fā)者將更新操作拆分為緊急和非緊急兩類，并根據(jù)瀏覽器的資源狀況進行動態(tài)調(diào)度。通過合理利用這些新特性，我們可以優(yōu)化React應用的性能，提升用戶體驗，為項目帶來更多的價值。
本文鏈接：http://www.tebozhan.com/showinfo-26-85230-0.htmlReact 18的并發(fā)渲染：顛覆傳統(tǒng)的性能飛躍
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： C#數(shù)據(jù)去重的五種方式，你知道幾種？
下一篇： Golang異步編程方式和技巧
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號