AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

React 15 RC 版本已發(fā)布!談?wù)勥@ 6 個令人驚嘆的新功能

來源: 責(zé)編: 時間:2024-06-05 17:47:18 126觀看
導(dǎo)讀Hello,大家好,我是 Sunday。5月23日,Next.JS 正式公布了 15 RC(候選版本)。這幾乎標志著 Next.JS 15 的所有全新功能都已經(jīng)確定下來了。圖片在這里它提供了很多全新更新,其中有 6 個我個人認為 價值較大 的全新功能(或更新),咱

Hello,大家好,我是 Sunday。XXX28資訊網(wǎng)——每日最新資訊28at.com

5月23日,Next.JS 正式公布了 15 RC(候選版本)。這幾乎標志著 Next.JS 15 的所有全新功能都已經(jīng)確定下來了。XXX28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片XXX28資訊網(wǎng)——每日最新資訊28at.com

在這里它提供了很多全新更新,其中有 6 個我個人認為 價值較大 的全新功能(或更新),咱們一起來看一下吧!XXX28資訊網(wǎng)——每日最新資訊28at.com

一、create-next-app更新

圖片圖片XXX28資訊網(wǎng)——每日最新資訊28at.com

運行 create-next-app 時,會出現(xiàn)一個新的提示詢問:是否要啟用 Turbopack 進行本地開發(fā)(默認為No)。XXX28資訊網(wǎng)——每日最新資訊28at.com

? Would you like to use Turbopack for next dev? … No / Yes

這意味著,Next.JS 將逐步從 webpack 過渡到 TurbopackXXX28資訊網(wǎng)——每日最新資訊28at.com

Turbopack:最快的模塊打包器之一XXX28資訊網(wǎng)——每日最新資訊28at.com

據(jù) Turbopack官網(wǎng) 描述(真實情況有待商榷):Turbopack 比 Webpack 快 700 倍,比 Vite 快 10 倍。XXX28資訊網(wǎng)——每日最新資訊28at.com

可以使用 --turbo 來啟用 Turbopack:XXX28資訊網(wǎng)——每日最新資訊28at.com

npx create-next-app@rc --turbo

二、React Compiler、React 19 的支持

Next.js App Router 建立在 React Canary 之上,這使得開發(fā)者可以在 React v19 發(fā)布之前使用這些新的 React API 。其中包括客戶端和服務(wù)器的新功能,例如:Actions。XXX28資訊網(wǎng)——每日最新資訊28at.com

而 React Compiler 是一個 React 編譯器。XXX28資訊網(wǎng)——每日最新資訊28at.com

React Compiler 是 React 團隊在 Meta 上創(chuàng)建的一個新實驗性編譯器。該編譯器通過對純 JavaScript 語義和 React 規(guī)則的理解,可以深入理解你的代碼,這使其能夠為您的代碼添加自動優(yōu)化。編譯器通過諸如 useMemo 和之類的 API 減少了開發(fā)人員必須執(zhí)行的手動記憶量 useCallback - 使代碼更簡單、更易于維護且更不容易出錯。XXX28資訊網(wǎng)——每日最新資訊28at.com

使用方式如下:XXX28資訊網(wǎng)——每日最新資訊28at.com

  1. 安裝 babel-plugin-react-compiler:
npm install babel-plugin-react-compiler
  1. 然后,在 next.config.js 中添加 experimental.reactCompiler 選項 :
const nextConfig = {  experimental: {    reactCompiler: true,  },}; module.exports = nextConfig;
  1. 或者,可以將編譯器配置為以“選擇加入”模式運行,如下所示:
const nextConfig = {  experimental: {    reactCompiler: {      compilationMode: 'annotation',    },  },}; module.exports = nextConfig;

3.更好地錯誤提示

Next.js 14.1 對錯誤消息和 Hydration 錯誤進行了改進。Next.js 15 繼續(xù)在此基礎(chǔ)上進行改進,添加了改進的 Hydration 錯誤視圖。XXX28資訊網(wǎng)——每日最新資訊28at.com

Hydration 錯誤現(xiàn)在會顯示錯誤的源代碼,并提供有關(guān)如何解決問題的建議。XXX28資訊網(wǎng)——每日最新資訊28at.com

例如,這是 Next.js 14.1 中先前的錯誤消息:XXX28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片XXX28資訊網(wǎng)——每日最新資訊28at.com

Next.js 15 RC 對此進行了改進:XXX28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片XXX28資訊網(wǎng)——每日最新資訊28at.com

4.全新的緩存邏輯

Next.js App Router 推出了自定義緩存默認值。這些默認值旨在默認提供性能最高的選項,并可在需要時選擇退出。XXX28資訊網(wǎng)——每日最新資訊28at.com

并不再自動緩存!XXX28資訊網(wǎng)——每日最新資訊28at.com

根據(jù)反饋,重新評估了緩存啟發(fā)式方法以及它們?nèi)绾闻c部分預(yù)渲染(PPR)等項目以及使用第三方庫進行交互。在 Next.js 15 中,將請求、路由處理程序和客戶端路由器緩存的緩存默認GET設(shè)置從默認緩存更改為默認不緩存。XXX28資訊網(wǎng)——每日最新資訊28at.com

如果想要緩存,那么需要手動配置,以下是一個使用 faetch API 的示例:XXX28資訊網(wǎng)——每日最新資訊28at.com

fetch('https://...', { cache: 'force-cache' | 'no-store' });

5.逐步采用部分預(yù)渲染(實驗性)

在 Next.js 14 中,引入了部分預(yù)渲染 (PPR) - 一種結(jié)合靜態(tài)和動態(tài)渲染的優(yōu)化在同一頁上。XXX28資訊網(wǎng)——每日最新資訊28at.com

除非使用動態(tài)函數(shù),否則 Next.js 目前默認為靜態(tài)渲染例如cookies()、、headers()以及未緩存的數(shù)據(jù)請求。XXX28資訊網(wǎng)——每日最新資訊28at.com

這些 API 將整個路由選擇為動態(tài)渲染。使用 PPR,開發(fā)者可以將任何動態(tài) UI 包裝在 Suspense 邊界中。當新請求進入時,Next.js 將立即提供靜態(tài) HTML shell,然后在同一個 HTTP 請求中渲染和流式傳輸動態(tài)部分。XXX28資訊網(wǎng)——每日最新資訊28at.com

為了允許逐步采用,新版本添加了 experimental_ppr 路線配置選項,用于將特定的布局和頁面選擇到 PPR 中:XXX28資訊網(wǎng)——每日最新資訊28at.com

import { Suspense } from "react"import { StaticComponent, DynamicComponent } from "@/app/ui" export const experimental_ppr = true export default function Page() {  return {     <>      <StaticComponent />      <Suspense fallback={...}>       <DynamicComponent />      </Suspense>     </>  };}

6.在響應(yīng)后執(zhí)行代碼next/after(實驗性)

在處理用戶請求時,服務(wù)器通常會執(zhí)行與計算響應(yīng)直接相關(guān)的任務(wù)。但是,開發(fā)者可能需要執(zhí)行日志記錄、分析和其他外部系統(tǒng)同步等任務(wù)。XXX28資訊網(wǎng)——每日最新資訊28at.com

由于這些任務(wù)與響應(yīng)沒有直接關(guān)系,因此用戶不必等待它們完成。XXX28資訊網(wǎng)——每日最新資訊28at.com

after()是一個新的實驗性 API,它通過允許開發(fā)者在響應(yīng)完成流式傳輸后安排要處理的工作來解決此問題,從而使輔助任務(wù)能夠在不阻塞主響應(yīng)的情況下運行。XXX28資訊網(wǎng)——每日最新資訊28at.com

要使用它,請?zhí)砑?nbsp;experimental.after 到 next.config.js:XXX28資訊網(wǎng)——每日最新資訊28at.com

const nextConfig = {  experimental: {    after: true,  },}; module.exports = nextConfig;

XXX28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-92196-0.htmlReact 15 RC 版本已發(fā)布!談?wù)勥@ 6 個令人驚嘆的新功能

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 誰說爬蟲只能 Python ?C# 爬蟲開發(fā)與演示

下一篇: OPPO 宣布全面普及 AI 手機,2024 年將為約 5 千萬用戶提供生成式 AI 功能

標簽:
  • 熱門焦點
Top