# React 觀念筆記

## 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 和目前快照的區別部分並重新渲染，因此:

const [num,setNum] = useState(0);

function click(){
    setNum(prev=>prev + 10);
    setNum(prev=>prev + 10);
    setNum(prev=>prev + 10);
    console.log(num); //0
}

而之後，react 會用一次更新來把 num 改成 30。

## key

當宣告了一個陣列，裡面包含多個 jsx 時，必須要包含 key ，例如:

const nums[] = [{id: 1,num: "12"},{id:2,num: "34"}]

const list = nums.map((now,index)=>{
   return <ListItem key: {now.id}, num = {now.num}/>
})

:::danger
不要使用 index 做為 key，因為 react 是透過 key 來檢查更新和管理 state，如果每次 map 後同個結果的 index 不同(例如每次插入物件在最前面，會讓之前 id 為 0 的變成 1)，這樣可能出現預期外的錯誤，且因為 key 被改變還會重新渲染。
:::

這個 key 就是 react 用來識別 component 的參數，所以當宣告時，如果沒有在 component 中加入 key，react 會跳出警告。

另外，當 key 被改變時，原有的 component 會被移除，因此透過把 state 做為 key，可以強制刷新某個component，例如:

const [now,setNow] = useState(0);
return (
    <Item key = {now}>
)

當 key 被改變，原有的 Item 會被移除，包含他的 state，因此可以用作重置某 component。