React 更新畫面
在一般瀏覽器中,會將 html 轉為 DOM,在一般的 JS 中,常常只能直接操控 DOM,而直接操縱 DOM 因為必須同時維護很多東西(state),會讓程式碼不容易維護,因此在 React 中出現了 virtual DOM。
簡單說,virtual DOM 並不是直接的 DOM,他保存了一些跟顯示畫面有關的內容,並且描述了整個 DOM 的架構,當有 state 發生改變時,virtual DOM 會比對目前的 virtual DOM 和上個時間點的 virtual DOM 快照是否有不同,並且只有不同的地方才會去修改真正的 DOM。
透過這種 virtual DOM 的概念,React 可以更好的維護 state,並減少繁瑣的直接操作 DOM。
state 的更新
react 中 setState 是非同步的,當有 setState 發生時,state 的值並不會馬上更新,而是將它存入 snapshop,之後檢查 virtual DOM 和目前快照的區別部分並重新渲染,因此: