# 初探 React 背後的運作機制
###### tags: `javascript`、`react`

## JSX 的真面目
給個範例，今天有 `app.js` 和 `todo.js` 兩個檔案。

`app.js` 檔案程式碼：

import React, { Component } from 'react'
import Todo from './todo.js'

// Parent Component
class App extends Component {
  render() {
    return (
      <div>
        <Todo />
      </div>
    )
  }
}

export default App

`todo.js` 檔案程式碼：

import React, { Component } from 'react'

// Children Component
export default function Todo() {
  return <h1>hello</h1>
}

然後會發現 `todo.js` 程式碼都沒用到 React 或 Component，這樣第 1 行 `import` 就不用寫了不是嗎？把程式碼變成這樣：

// Children Component
export default function Todo() {
  return <h1>hello</h1>
}

結果畫面 render 失敗，跑出了錯誤：

說 React 不存在，點進去 `todo.js:4` 看看程式碼：


是 `return React.createElement("h1", null, "hello");` 這段程式碼出了錯，有使用到 `React`，因此才會出錯。

而 `React.createElement("h1", null, "hello")` 就等同於 JSX 語法的 `<h1>hello</h1>`，所以你如果把 JSX 語法寫成 React 的語法也可以，因為它就是 JSX 語法底下在運作的語法。只是一般來說都會使用 JSX 語法來撰寫，因為比較方便撰寫與易讀。

## React 的渲染機制 與 Virtual DOM
在 jQuery 當中，如果我們寫一個 function 專門 render 畫面的，只要一變更資料就 call 這個 function，雖然很方便在更新資料時不用使用太多 DOM 節點的操作只管資料有沒有傳到相對應的變數，但今天如果我們有好幾百個元素在 專門 render 的 function 當中，若只更改一個元素資料，按照提升效能的角度來說，理當只在畫面中更改那一個元素就好，但是在 render 的 function 當中不會管這麼多，只要資料變更就會是整個畫面好幾百個元素重新 render，因此變成有很多多餘的動作拖垮網站效能。

那 React 的 `render` function 呢？也是這樣子嗎？ 我們舉個例子：

jQuery 的寫法：

function render() {
  $('ul').empty();
  $('ul').append(`
    <div>
      123
    </div>
  `);
}

React 的寫法：

class App extends Component {
  // 看這個 render function
  render() {
    return (
      <div>
        123
      </div>
    )
  }
}

單看 `render` function 裡面放的元素，會發現說和 jQuery 所寫的內容並無不同，這樣是否也代表 React 的 `render` function 也是一更新資料就會全部 render 一遍？

答案是否定的，因為 React 的 render 底層，或者說在 render 的時候還有一層機制叫做 Virtual DOM，長這樣：

圖片來源：https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/

這個 Virtual DOM 是一個機制，幫我們把 DOM 結構存到記憶體當中，只要 DOM 因 state 有所變化就會再建立另外一個 DOM 副本存到另外一個記憶體當中，接著再以最小操作化去觀察兩個不同記憶體之間的 DOM 的差別，然後再把這個差別 Patch 到實體的 DOM 上面去。

也因為有 Virtual DOM 的機制，可以讓 React 的 `render` function 在更新 DOM 結構的時候，不會全部的 DOM 結構都 render，在 render 的時候只會更新有不同的地方。

拿上面的 React 程式碼來看，`render` 的部份在 Virtual DOM 類似這樣的結構：

{
    tag: 'div',
    props: null,
    children: 123
}

如果 `render` 內容改成：

<div>
    456
</div>

那 Virtual DOM 就類似變成這樣：

{
    tag: 'div',
    props: null,
    children: 456
}

而這兩個以 object 組成的資料，僅有 `children` 的內容從 '123' 變成 `456`，因此，`render` 就只會更新這個 `children` 的內容而已，其它的 DOM 結構都不會去動也不會重新 render。

#### 延伸資料
1. [從頭打造一個簡單的 Virtual DOM](https://blog.techbridge.cc/2019/02/04/vdom-from-scratch/)
## Pure component 與 Immutable data
請參考這篇：https://github.com/aszx87410/blog/issues/26