開發容易忽略的事情(一)

1. 拆分創建組件(Component)

在最初編寫的過程中很容易忽略掉先行將各組件(Component)進行拆分，
導致開發一段時間後需要再回頭處理，因此開發時需要提醒自己，
'保持組件內程式碼以較少的量運行'，一個組件對應一個功能，
這樣除了可以在過程中加快測試與減少調整程式碼的時間，以便發生問題也更容易找出BUG

2. 忘記以大寫字母為開頭來命名組件(Component)

這是很容易一個閃神而發生的小錯誤。'因為在JSX中，以小寫字母為開頭的組件編譯是HTML元素'

3. 不遵循React文件結構

文件結構的規範會依照不同開發者而有所差異，但整體而言的目標都是為了'未來的維護或開發'來當出發點來設想，因此文件夾結構、檔案的命名就很重要，遵循命名規範可幫助提高可讀性或組織性，更是增加辨識各程式碼的用途。

4. 循環列表時要記得使用Key

例如以下程式碼：

const lists = ['cat', 'dog', 'fish’];
render() {
    return (<ul>{lists.map(listNo =><li>{listNo}</li>)}</ul>);
}

程式不涉及元素CRUD(增改刪查)，不會有太大的影響。但如果會針對列表進行CRUD那可能就會遇到渲染問題。React會跟蹤文件物件模型(DOM)上的所有列表元素。因此如果沒有使用Key當標誌，React會無法知道列表中發生的變化。

因此要記得在列表元素添加Key，Key給每一個元素唯一的標誌，有助於React確認那些項目被新增、刪除、修改等。

<ul>{lists.map(listNo => <li key={listNo}>{listNo}</li>)}</ul>