如何更高效、方便的在React.js中操做State

一、什麼是flatten state？

最近在寫代碼的時候在React的對象數組的State數據感受不是很方便，因此在在使用了其餘方式來解決這個問題。

flatten state目的是就是把數據扁平化，更加方便咱們對數據的操做，flatten就是相似於使用HashMap的形式，在JavaScript中咱們可使用Object。

二、實際使用

在這裏咱們以React爲例子，在ReactHooks中咱們常常對數據進行操做，可是若是操做的是一個對象數組而且該數組很是大這樣時很耗時的，代碼也很冗餘，因此咱們能夠考慮把數組轉化成爲flattenState的形式。

exp

const initState = [
  {id: 1, name: 'RMA', champion: 13},
  {id: 2, name: 'ACM', champion: 7},
  {id: 3, name: 'MUN', champion: 4},
  {id: 4, name: 'ARS', champion: 0}
]
const [teams, setTeams] = useState()
複製代碼

對於這樣的數據若是咱們須要查找某一個數據或者修改某一個數據時對應的時間複雜度爲O(n)，由於咱們每次對數據進行操做都須要循環遍歷一次數組。

// 刪除一項
const deleteData = (id) => {
    return teams.filter(item => item.id !== id)
}
const newTeams = deleteData(3)
setTeams(newTeams)

// 修改一項
const modifyData = (id, val) => {
    return teams.map(item => {
        if(item.id === id) { // tips：item爲引用值能夠改變
            item.champion = val
        }
        return item
    })
}
const newData = modifyData(4, 1)
setTeams(newData)

// 查找一項
const findData = (id) => {
    return teams.find(item => item.id === id)
}

複製代碼

在咱們熟悉使用數組的一些高階方法以後操做起來仍是比較方便的，可是若是數據量過大每次循環仍是很耗時的。有沒有更好的方法呢？固然就是使用flattenState(Object)來解決。

三、使用hashMap的形式

上面的數據有一個特色就是每個數據項都具體有惟一的標識符(id)，在上面的例子中咱們在查找某一個數據項的時候使用的該惟一標識符。

因此咱們能夠思考在查找某個特定的數據的時候不須要再經過循環遍歷每一項而後使用每一項的id和特定id對比，我但願能夠直接訪問id就可以訪問到其對應的數據不須要再使用循環了，可以作到這樣能力就是對象(object)。

因此咱們須要將上面的形式轉化爲下面這樣的

const flattenState = {
    1: {id: 1, name: 'RMA', champion: 13},
    2: {id: 2, name: 'ACM', champion: 7},
    3: {id: 3, name: 'MUN', champion: 4},
    4: {id: 4, name: 'ARS', champion: 0}
}
複製代碼

上面這一種形式就是使用惟一的id來做爲鍵值對的鍵，把上面數組的某一項做爲鍵值對的值。

對數據操做

// 刪除
const deleteData = (id) => {
    delete flattenState[id]
    setTeams(flattenState)
}

// 修改id爲'1'的
const modifyData = (id, val) => {
    const newTeam = {...Teams[id], champion: val}
    setTeams({...teams, [id]: newTeam})
}

// 查詢
const findData = (id) => {
    return teams[id]
}

複製代碼

這樣就方便許多了,咱們在操做數據的時候就不須要循環了因此時間複雜度變味了O(1)，思路也更加清晰了，代碼也沒有之前那麼多了。

四、數組形式flattenState形式相互轉化

數組轉化爲flattenState

const converseArrToObj = (arr) => {
    return arr.reduce((obj, item) => {
        obj[item.id] = item
        return obj
    }, {})
}
複製代碼

flattenState轉化爲數組

const converseObjToArr = (obj) => {
    const keys = Object.keys(obj)
    return keys.map(key => {
        return obj[key]
    })
}
複製代碼

五、優勢

• 解決數據的冗餘
• 處理數據更加的方便
• 代碼更加清晰

你們所熟知的Redux就是使用的該方式：Normalizing State Shape，你們有興趣能夠看看。

今天的文章就到這裏了，你們晚安。。。