0

我的应用程序运行虽然有点慢，因为我循环创建按钮并再次循环更改按钮的颜色

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

我的问题是，我如何只渲染一个使用 Array 的对象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',color:'black',checked:false},
    {key:2,value:'March',title:'Mar',color:'black',checked:false},
    {key:3,value:'April',title:'Apr',color:'black',checked:false},
    {key:4,value:'May',title:'May',color:'black',checked:false},
    {key:5,value:'June',title:'Jun',color:'black',checked:false},
    {key:6,value:'July',title:'Jul',color:'black',checked:false},
    {key:7,value:'August',title:'Aug',color:'black',checked:false},
    {key:8,value:'September',title:'Sep',color:'black',checked:false},
    {key:9,value:'October',title:'Oct',color:'black',checked:false},
    {key:10,value:'November',title:'Nov',color:'black',checked:false},
    {key:11,value:'December',title:'Dec',color:'black',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)
  }

开放任何建议：<请在这里帮助新手

4

2 回答 2

3

我能想到的唯一能进一步增强这一点的就是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。

除非阵列上有数千个数据，否则在那么小的阵列上循环不会减慢应用程序的速度。

于 2020-10-19T03:53:52.540 回答
1

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

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

请查看这个展示建议的示例 https://codesandbox.io/s/elated-bose-0vwtw

于 2020-10-19T04:27:08.087 回答