0

这就是我正在做的

这是那些圆圈组件

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

和渲染方法

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

理想情况是当您单击一个圆圈时，颜色会发生变化，而另一个圆圈不会再次渲染。我正在尝试使用上面的备忘录，但它仍然很滞后。有什么办法可以提高性能，有没有办法检查未点击的圆圈是否重新渲染？

4

1 回答 1

0

用于useMemo备忘录组件的道具和状态。
仅当其中一些值更改时才通过[ 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 ]);
};

添加key道具以确保该Item组件不会重新安装。

<Item key={`x${row1}-y${col1}`} x={row1} y={col1} />
于 2020-02-13T15:57:29.217 回答