Question

我在React native中使用FlatList时遇到了这个问题，我使用的是PureComponent，我的数据只有20个项目，但它渲染了30次。

这是我的代码：

export default class App extends React.PureComponent {
  state={
    data: [{key: '1'}, {key: '2'}, {key: '3'}, {key: '4'}, 
    {key: '5'}, {key: '6'}, {key: '7'}, {key: '8'}, 
    {key: '9'}, {key: '10'}, {key: '11'}, {key: '12'}, 
    {key: '13'}, {key: '14'}, {key: '15'}, {key: '16'}, 
    {key: '17'}, {key: '18'}, {key: '19'}, {key: '20'}]
  }
  render() {
    console.log(this.state.data);
    return (
      <View>
        <FlatList 
          data={this.state.data}
          renderItem={({item}) => {
            console.log(item.key)
            return (
              <MyItem>{item.key}</MyItem>
            );
          }}
        />
      </View>
    );
  }
}

export default class MyItem extends React.PureComponent {
    render(){
      return(
        <View>
          <Text>{this.props.children}</Text>
        </View>
      );
    }
  }

这就是我在运行时得到的

1 2 3 4 五 6 7 8 9 10 1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Answer 1

您的代码看起来很好。运行此代码时应该没有任何问题。

您如何知道屏幕呈现的次数？这里因为你的状态是静态的，所以它应该只呈现一次，除非你在代码中的某处做setState。

否则这段代码很好。

FlatList渲染次数

1 个答案: