快捷導(dǎo)航

React18新增特性介紹

更新時(shí)間：2022年09月02日 08:37:51 作者：快樂(lè)的蜜蜂

react歷次版本迭代主要想解決的是兩類(lèi)導(dǎo)致網(wǎng)頁(yè)卡頓的問(wèn)題，分別是cpu密集型任務(wù)和io密集型任務(wù)導(dǎo)致的卡頓問(wèn)題，react18新增特性就是為了解決上述問(wèn)題

React 18 最新的特性
批處理文件
在同一個(gè) 函數(shù)中, 調(diào)用多次 useState 也只是會(huì)更新一次

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  function handleClick() {
    setCount(c => c + 1); // 不觸發(fā)re-render
    setFlag(f => !f); // 不觸發(fā)re-render
    // 在調(diào)用結(jié)束是只觸發(fā)一次re-render（這就是batching）
  }
  return <button onClick={handleClick}>Next</button>;
}

但是在React 18以前，對(duì)于在異步回調(diào)中調(diào)用的updates，React Batching將無(wú)法生效：

function handleClick() {
  fetchSomething().then(() => {
  setCount(c => c + 1); // 觸發(fā)re-render
  setFlag(f => !f); // 再次觸發(fā)re-render
  });
}

這是因?yàn)樵赗eact 18之前，React只在事件處理程序期間批量更新。默認(rèn)情況下，React不會(huì)對(duì)promise、setTimeout或任意event事件中的更新進(jìn)行批處理。
在 React 18 版本的這個(gè)flushSync 就可以達(dá)到批量更新

import { flushSync } from 'react-dom';
flushSync(() => {
setCount(c => c + 1); 
setFlag(f => !f); 
});

批量更新但是render 值渲染一次, 節(jié)省了 dom的渲染性能

更新?tīng)顟B(tài)：

緊急更新（Urgent updates）：反映直接的交互，如輸入、點(diǎn)擊、按鍵按下等等。

過(guò)渡更新（Transition updates）：將UI從一個(gè)視圖過(guò)渡到另一個(gè)視圖。

輸入、點(diǎn)擊、按鍵按下等需要立即響應(yīng)以符合人類(lèi)的物理認(rèn)知，符合人的直覺(jué)。但是過(guò)渡更新卻不同，用戶(hù)不會(huì)期望看到中間的轉(zhuǎn)換過(guò)程（只需要結(jié)果），因此可能不需要立即更新視圖。
在React 18以前的版本所有的更新都會(huì)認(rèn)為是緊急更新。而startTransition提供api給用戶(hù)來(lái)手動(dòng)將某些更新標(biāo)記為非緊急更新，從而避免浪費(fèi)時(shí)間去渲染不必要的內(nèi)容。

如下面的例子：

// 在界面上顯示用戶(hù)輸入

setInputValue(input);

// 在界面上呈現(xiàn)查詢(xún)結(jié)果

setSearchQuery(input);

setInputValue會(huì)立即更新用戶(hù)的輸入到界面上，屬于需要緊急更新的操作。setSearchQuery是根據(jù)用戶(hù)輸入，查詢(xún)相應(yīng)的內(nèi)容，用戶(hù)可以輸入很多次，如果一直查詢(xún)會(huì)可能會(huì)導(dǎo)致過(guò)多的js計(jì)算消耗在查詢(xún)上面（甚至阻塞輸入操作），而一般來(lái)說(shuō)用戶(hù)的期望值是「等待輸入完成之后，查詢(xún)并顯示最終的結(jié)果」，因此這里的setSearchQuery可以看成是非緊急更新。
通過(guò)startTransition包裹setSearchQuery將其標(biāo)記為非緊急更新：

setInputValue(input);
// 標(biāo)記為非緊急更新
startTransition(() => {
React.setSearchQuery(input);
});

setTimeout的區(qū)別

就上面setSearchQuery的例子，使用setTimeout（或者debounce or throttle）也能達(dá)到相似的目的，那這個(gè)startTransition和setTimeout有啥區(qū)別？
一個(gè)重要區(qū)別是setTimeout是「延遲」執(zhí)行，startTransition是立即執(zhí)行的，傳遞給startTransition的函數(shù)是同步運(yùn)行，但是其內(nèi)部的所有更新都會(huì)標(biāo)記為非緊急，React將在稍后處理更新時(shí)決定如何render這些updates，這意味著將會(huì)比setTimeout中的更新更早地被render。

到此這篇關(guān)于React18新增特性介紹的文章就介紹到這了,更多相關(guān)React新特性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: