react代码的一些优化（自己代码记录）

优化一

  const checkDraftBuildDeviceItem = async (query, item) => {
    
    
    await apis.checkDraftBuildDeviceItem(query).then((res) => {
    
    
      setIsEditProject(false)
      if (res.code == 101) {
    
    
        item._itemsImperfect = false
        item._buildImperfect = false
        item._deviceImperfect = false
        item._itemsText = ''
        item._buildText = ''
        item._deviceText = ''
      }
    }).catch((err) => {
    
    
      // 由于种种原因，code只能在catch中被捕获了，可能原因是ajax封装的时候没有定义230，231，232这几个code
      //然后就拦截了
      console.log(err, 'err')
      const {
    
     response } = err
      let _arr = Object.keys(response)
      if (!_arr.length) return
      const {
    
     code, data, msg } = response
      if (code == 230) {
    
    
        // 项目位置报问题
        setIsEditProject(true)
        item._itemsImperfect = true
        item._buildImperfect = false
        item._deviceImperfect = false
        item._itemsText = data
      } else if (code == 231) {
    
    
        setIsEditProject(false)
        // 大楼位置报问题
        item._itemsImperfect = false
        item._buildImperfect = true
        item._deviceImperfect = false
        item._buildText = data
      } else if (code == 232) {
    
    
         // 设备信息报问题
        setIsEditProject(false)
        item._itemsImperfect = false
        item._buildImperfect = false
        item._deviceImperfect = true
        item._deviceText = data
      }
    })
    return item
  }

这样写有很多重复的，另外一种写法看起来更清爽,用了 try catch 进行捕获，加上async await 来执行同步，加上Object.assign(target,source,…)来改变将source的值赋值到target中。

 const checkDraftBuildDeviceItem = async (query, item) => {
    
    
    try {
    
    
      // await同步数据
      const res = await apis.checkDraftBuildDeviceItem(query)
      const {
    
     code } = res
      const isCode101 = code === 101
      setIsEditProject(!isCode101)

      if (isCode101) {
    
    
        item._itemsImperfect = false
        item._buildImperfect = false
        item._deviceImperfect = false
        item._itemsText = ''
        item._buildText = ''
        item._deviceText = ''
      }
    } catch (err) {
    
    
      console.log(err, 'err')
      const {
    
     data, msg, code } = err.response
      if (code == 230) {
    
    
        setIsEditProject(true)
        // 将后面的值赋值给item，这样item就改变了。
        Object.assign(item, {
    
     _itemsImperfect: true, _buildImperfect: false, _deviceImperfect: false, _itemsText: data })
        // 假设给 let a =  Object.assign(item, { _itemsImperfect: true, _buildImperfect: false, _deviceImperfect: false, _itemsText: data })
        // 那么 console.log(a === item) --- 打印出来为true
      } else if (code == 231) {
    
    
        setIsEditProject(false)
        Object.assign(item, {
    
     _itemsImperfect: false, _buildImperfect: true, _deviceImperfect: false, _buildText: data })
      } else if (code == 232) {
    
    
        setIsEditProject(false)
        Object.assign(item, {
    
     _itemsImperfect: false, _buildImperfect: false, _deviceImperfect: true, _deviceText: data })
      }
    }
    return item
  }

优化二

 deviceInfoList?.list?.map((itemTwo) => {
    
    
      changedSelectRows.map((itemChildren) => {
    
    
        if (itemTwo._id == itemChildren._id) {
    
    
          itemTwo._itemsImperfect = itemChildren._itemsImperfect
          itemTwo._buildImperfect = itemChildren._buildImperfect
          itemTwo._deviceImperfect = itemChildren._deviceImperfect
          itemTwo._deviceText = itemChildren._deviceText
          itemTwo._buildText = itemChildren._buildText
          itemTwo._itemsText = itemChildren._itemsText
        }
        return itemTwo
      })
      return itemTwo
    })

• 遍历过程中可以使用 for…of 循环，而不是 .map() 方法，因为 .map() 方法会返回一个新的数组，但是在这段代码中不需要返回新的数组。
• changedSelectRows 中的元素 _id 唯一，可以考虑把 changedSelectRows 转换成对象，以 _id 为 key

const changedSelectRowsObj = {
    
    };
for (const item of changedSelectRows) {
    
    
  // 对象的键值获取，将 changedSelectRows对应_id的值放入changedSelectRowsObj对象中
  changedSelectRowsObj[item._id] = item;
}
// 遍历元数据deviceInfoList?.list
for (const itemTwo of (deviceInfoList?.list || [])) {
    
    
  // 通过查找itemTwo._id在changedSelectRowsObj中是否存在将changedSelectRowsObj中
  //遍历出来的itemChildren进行赋值给itemTwo
  const itemChildren = changedSelectRowsObj[itemTwo._id];
  if (itemChildren) {
    
    
    itemTwo._itemsImperfect = itemChildren._itemsImperfect;
    itemTwo._buildImperfect = itemChildren._buildImperfect;
    itemTwo._deviceImperfect = itemChildren._deviceImperfect;
    itemTwo._deviceText = itemChildren._deviceText;
    itemTwo._buildText = itemChildren._buildText;
    itemTwo._itemsText = itemChildren._itemsText;
  }
}