使用findindex优化代码 -- 实例

我这个地方的场景是，现在有数组 ，我要点击一个事件发请求获得其中一条里面 ，需要替换的某个元素的值，就是说用响应回来的值替换原有的这一个，原来我就没想到 ，用的就是遍历的方法(map)找到对应的去替换；

使用findindex不需要你去遍历，你找到需要替换的那一条 获取他的索引，然后用这个索引去在原数组找到后再替换

渲染速度极大提升！

before

  const showMessage = async (value: any) => {
      listDetailAll.map(item => {
        if (item.id == value.id) {
          item.eyeLoading = true
        }
      })
      setListDetailAll([...listDetailAll])
    const res = await geteye(value.id)
    if (res != undefined && res.code === 200) {
      let data = res.result
      listDetailAll.map(item => {
        if (item.id == value.id) {
          item.showmessage = true
          item.idCard = data.idCard
        }
      })
      setListDetailAll([...listDetailAll])
    } else {
      console.log(res)
    }
  }  

在优化前的 showMessage 函数中使用了 map 函数遍历数组来更新对应的元素，这样会导致每个元素都会重新渲染，而实际上只需要更新对应元素即可。
优化后的 showMessage 函数中使用了 findIndex 函数来查找对应的元素，并只更新该元素，避免了重复渲染。

after

const showMessage = useCallback(async (value: any) => {
    const index = listDetailAll.findIndex(item => item.id === value.id)
    if (index !== -1) {
      listDetailAll[index].eyeLoading = true
      setListDetailAll([...listDetailAll])
  
      const res = await geteye(value.id)
      if (res != undefined && res.code === 200) {
        let data = res.result
        listDetailAll[index].showmessage = true
        listDetailAll[index].idCard = data.idCard
        setListDetailAll([...listDetailAll])
      } else {
        console.log(res)
      }
    }
  }, [listDetailAll])

解决问题之后再区别一下map和findindex，以便咱们理解
"map"函数的时间复杂度一般为O(n)，其中n是要映射的元素个数。这是因为map函数只需要遍历一次待映射的元素即可，在每个元素上执行相同的操作。因此，map函数的时间复杂度与待映射元素的个数成正比。
需要注意的是，如果在map函数中使用了一个复杂度为O(1)的操作，那么整个map函数的复杂度仍然是O(n)，因为它仍然需要遍历所有元素。
此外，map函数的空间复杂度也为O(n)，因为它需要存储映射后的结果。

"findIndex"函数通常是一个数组方法，用于在数组中查找符合特定条件的元素，并返回该元素在数组中的索引。
其时间复杂度通常为O(n)，其中n是数组的长度。这是因为在最坏情况下，需要遍历整个数组才能找到符合条件的元素。
然而，在最好情况下，即第一个元素就满足条件时，复杂度为O(1)。因此，平均来说，"findIndex"函数的时间复杂度可以近似地看作O(n/2)，或者简单地记作O(n)。
需要注意的是，复杂度还会受到其他因素的影响，例如搜索条件的复杂度、数组的大小等。