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

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以前，對于在異步回調(diào)中調(diào)用的updates，React Batching將無法生效：

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

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

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

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

更新狀態(tài)：

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

過渡更新（Transition updates）：將UI從一個視圖過渡到另一個視圖。

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

如下面的例子：

// 在界面上顯示用戶輸入

setInputValue(input);

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

setSearchQuery(input);

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

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

setTimeout的區(qū)別

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

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

最新評論