如何更高效、方便的在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，你们有兴趣能够看看。

今天的文章就到这里了，你们晚安。。。