UseState на производительность кнопки, как повысить производительность UseMemo?

Итак, у меня есть эти кнопки, которые делают 2 вещи, такие как кнопка флажка, изменение цвета, переключение между зеленым и черным.

Моя проблема: кнопка, которую я нажал, имеет небольшую задержку, прежде чем она изменит цвет, плохая производительность в целом для моего приложения, уже пробовал это в моем Redmi 5 Redmi note 9 и Galaxy a8, все они имеют небольшую задержку с разной продолжительностью задержки Redmi 5 имеет самую длинную задержка вроде почти 1 сек.

Мой вопрос: есть ли для этих кнопок более быстрый / более производительный код? Это неправильный способ сделать это? Я слышал, что useMemo может помочь повысить производительность, но я не знаю, как это сделать в этом случае, поскольку мне нужно создать кнопку с другой функцией.

Вот мой код: сначала я указываю начальное значение

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:true},
{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}
])

во-вторых, я создаю кнопки

  const 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={booleanMonth[item.key].checked} 
                color={booleanMonth[item.key].checked==true ? 'green':'black'}
                onPress={()=>onPressMonthFilter(booleanMonth[item.key].key,booleanMonth[item.key].checked)}
                /></View>)
            }
            </View>)
    }

в-третьих, я делаю функцию, чтобы изменить цвет кнопки с зеленого на задний и проверить статус с ложного на истинное, наоборот

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

  }

Спасибо за помощь

0 ответов

Другие вопросы по тегам