使用数组和许多对象的useState上的useMemo

问题描述

自从我循环创建按钮并再次循环更改按钮的颜色以来，我的应用程序运行起来有点慢

它很慢，因为每次我更改按钮的颜色时，我都必须在useState对象数组中循环

我的问题是，如何仅在使用useState的数组中呈现一个对象？ 或者..有没有比这种循环更快或更更好的方式了？

我还尝试使用booleanMonth [0] .checked = true定位检查状态，这会更改状态而不循环，但不会更改颜色。

这是数组：

  const [booleanMonth,setMonth]=useState([
    {key:0,value:'January',title:'Jan',color:'black',checked:false},{key:1,value:'February',title:'Feb',{key:2,value:'march',title:'Mar',{key:3,value:'April',title:'Apr',{key:4,value:'May',title:'May',{key:5,value:'June',title:'Jun',{key:6,value:'July',title:'Jul',{key:7,value:'August',title:'Aug',{key:8,value:'September',title:'Sep',{key:9,value:'October',title:'Oct',{key:10,value:'November',title:'Nov',{key:11,value:'December',title:'Dec',checked:false}
    ])

这是我创建按钮的地方，如果由于按下按钮而导致数组ABOVE中的对象之一发生更改，该按钮将循环播放：

 const createButtonMonth = useMemo(() =>{
    console.log('createButtonMonth')
    return (<View style={styles.containerForButtons2}>
            {
              booleanMonth.map((item,key) => 
                <View key={item.key} style={styles.buttonFilter3}>
                <Button style={styles.buttonFilter3}
                title={item.title} 
                value={item.checked} 
                onCheckColor='red'
                color={item.checked==true ? 'green':'black'}
                onPress={()=>onPressMonthFilter(booleanMonth[item.key].key,booleanMonth[item.key].checked)}
                /></View>)
            }
            </View>)
  },[booleanMonth])

这是按下按钮功能，它也循环确定哪个按钮更改其颜色，因为其检查状态为真/假（我认为这也会因为循环而使我慢下来）

  const onPressMonthFilter = (keyMonth,statusMonth) =>{
    let newArr = [...booleanMonth]
    if(newArr[keyMonth].checked==false){
      newArr[keyMonth].checked=true
    }else{
      newArr[keyMonth].checked=false
    }
    
    setMonth(newArr)
  }

打开任何建议：

解决方法

我唯一想进一步增强的方法是将onPressMonthFilter 与useCallback包裹起来

 const onPressMonthFilter = useCallback((keyMonth,statusMonth) =>{
    let newArr = [...booleanMonth]
    if(newArr[keyMonth].checked==false){
      newArr[keyMonth].checked=true
    }else{
      newArr[keyMonth].checked=false
    }
    
    setMonth(newArr)
  },[setMonth,booleanMonth])

因此该函数将返回一个记忆值。除此之外，该代码似乎非常简单，除了将它们循环以分配UI之外，您别无选择。

除非很小的数组上的数据，否则在数组上循环很小不会降低应用程序的速度。

,

我建议将静态数据保持静态，仅将应用程序状态保持在该状态。从记录的角度来看，我知道将一个实体的所有属性放在一起是有意义的，但是在这种情况下，我认为您可以管理按钮的状态并推断其他所有内容。例如，如果您知道按钮是否被选中，则可以推断按钮的颜色。

您可以将月份列表作为静态数组来生成UI。然后保持阵列状态以跟踪被检查的按钮。如果状态中存在按钮中的值，则应检查按钮。如果选中该按钮，则颜色应为绿色。如果缺少按钮，按钮的操作只会将其值添加到状态数组中；如果存在，则将其删除。

请查看此示例，其中展示了建议 https://codesandbox.io/s/elated-bose-0vwtw