可能很多朋友在專案中還沒用過
Suspense
,但是
Suspense
是
React
未來發展非常重要的一環。
本文會講解
Suspense
對於
React
的意義。
React的迭代過程
React
從v16到v18主打的特性經歷了三次大的變化:
v16:Async Mode(非同步模式)
v17:Concurrent Mode(併發模式)
v18:Concurrent Render(併發更新)
要了解這三次變化的意義,需要先了解
React
中一個很容易混淆的概念 ——
render
(渲染)。
ClassComponent
的
render
函式執行時被稱為
render
:
class App extends Component { render() { // 。。。這是render函式 }}
而將
render
的結果渲染到頁面的過程,被稱為
commit
。
Async Mode
的目的是為了讓
render
變為非同步、可中斷的。
Concurrent Mode
的目的是讓
commit
在使用者的感知上是併發的。
由於
Concurrent Mode
包含
breaking change
,所以
v18
提出了
Concurrent Render
,減少開發者遷移的成本。
那麼
讓commit在使用者的感知上是併發的
是什麼意思呢?
“併發”的意義
說到
併發
,就不得不提
Suspense
。考慮如下程式碼:
const App = () => { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { setCount(count => count + 1); }, 1000); }, []); return ( <>