React native 是否需要检查功能组件是否正在进行不必要的重新渲染？

下面是那些圆组件

const Item = (props) => {
  // console.log(props)
  const [count, setCount] = useState(0);
  console.log('aaa')
  return (
    <TouchableOpacity style={{ width: containerSize, height: containerSize, padding: PADDING, justifyContent: "center", alignItems: "center" }}
      onPress={() => {
        count == 0 ? setCount(1) : setCount(0)
      }}
    >
      <View style={[count == 0 ? { backgroundColor: '#fff' } : { backgroundColor: '#3ba39a' },
      {
        width: itemSize, height: itemSize, borderRadius: containerSize / 2,
        justifyContent: "center", alignItems: "center",
        transform: [{ rotate: '-90deg' }]
      }]} >
        <Text>{props.x}</Text>
      </View>
    </TouchableOpacity>
  )
}
const MemoizedItem = memo(Item);

const项目=（道具）=>{
//控制台日志（道具）
const[count，setCount]=useState（0）；
console.log（'aaa'）
返回(
{
计数==0？设置计数（1）：设置计数（0）
}}
>
{props.x}
)
}
const MemoizedItem=备忘录（项目）；

和渲染方法

  addItem(){

    this.map = [];
    for (let col1 = 0; col1 < itemPerCol; col1++) {
      this.map[col1] = [];
      for (let row1 = 0; row1 < itemPerRow; row1++) {
        this.map[col1][row1] = <MemoizedItem x={row1} y={col1} />
      }
    }
    this.setState({ map: this.map })
  }

  renderItem() {

    return this.state.map.map((row) => {
      return row.map((item) => {
        return item;
      })
    })
  }

addItem（）{
this.map=[]；
for（设col1=0；col1{
返回行映射（（项）=>{
退货项目；
})
})
}

理想情况是，当您单击一个圆时，颜色会发生变化，而另一个圆不会再次渲染。 我试着使用上面的备忘录，但它仍然很滞后。

---

有没有办法提高性能，有没有办法检查未点击的圆圈是否重新呈现？

使用

usemo

来记录组件的道具和状态。
传递

[props.x，props.y，count]

使组件仅在某些值更改时重新渲染

import { useMemo } from 'react';
const Item = (props) => {
  const [count, setCount] = useState(0);
  return useMemo(() => (
    <TouchableOpacity>
      { console.log(`Item x${props.x}-y${props.y} render`) }
      ...
    </TouchableOpacity>
  ), [ props.x, props.y, count ]);
};

---

帮助我检查组件渲染时日志行是否显示？如果为true，是否可以检查组件是否重新渲染？

<Item key={`x${row1}-y${col1}`} x={row1} y={col1} />