React Native Button onPress 性能答案

【问题标题】：React Native Button onPress performanceReact Native Button onPress 性能
【发布时间】：2021-01-30 13:12:58
【问题描述】：

所以我有这些按钮可以做两件事，比如复选框按钮，更改颜色，在绿色和黑色之间切换状态检查为真或假

我的问题是：我按下的按钮在改变颜色之前有轻微延迟，我的应用程序整体性能不佳，已经在我的 Redmi 5 Redmi note 9 和 Galaxy a8 中尝试过，它们都有轻微延迟，延迟时间不同 Redmi 5 的延迟时间最长，大约 1 秒。我的问题是：这些按钮是否有更快/更好的性能代码？这是错误的做法吗？

这是我的代码：首先我声明初始值

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>)
    }

第三个功能，我将按钮颜色更改为绿色，并将检查状态从 false 变为 true，反之亦然

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

  }

感谢您的帮助

【问题讨论】：

你尝试过发布模式的测试吗？如果是调试模式，性能一般都不好，不用介意。
是的！即使我尝试作为 apk
小心，有几种方法可以制作 apk。您是否关注了reactnative.dev/docs/signed-apk-android.html，然后尝试了 --variant=release？

标签： reactjs react-native checkbox react-native-android

【解决方案1】：

如果你想优化代码本身，试试 useMemo() https://reactjs.org/docs/hooks-reference.html#usememo

或者 React.memo() https://reactjs.org/docs/react-api.html#reactmemo

基本上，这些检查输入如 useEffect 并确定函数的一部分是否需要重新渲染组件。

我假设setMonth(newArr) 会导致整个按钮重新呈现，这意味着随着 booleanMonth 中元素数量的增加，性能会变得更差。

另外，尝试获取 apk/ipa 的发布版本。通常，调试模式真的很慢。关注https://reactnative.dev/docs/signed-apk-android.html 并获取 --variabe=release。

【讨论】：

感谢您的信息，但仍然不知道如何使它变得更好，但我明天再试一次 arigatou
如果您有任何问题，请告诉我。
这也可能有帮助。我之前尝试过优化一些反应原生行为。这是我去年得到的答案stackoverflow.com/questions/58930232/…

【解决方案2】：

感谢 Hikaru Watanabe 的解决方案，这是我的问题的答案。

所以我才意识到让我慢下来的实际上是另一个 2个数组UseState（我不包括那些有问题的，因为我认为它不相关）；年度使用状态分支的使用状态

它们都循环创建按钮，就像我循环几个月按钮一样并且它全部重新渲染，因此每次我按下月份按钮时都会再次循环，反之亦然

所以这就是解决方案：

  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={booleanMonth[item.key].checked} 
                onCheckColor='red'
                color={booleanMonth[item.key].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)

  }

上面的代码每次仍然循环，仍然没有解决方案

【讨论】：