关于FlatList的卡顿问题

No description provided.

2020-04-08 17:22:33.901 [info][tid:com.facebook.react.JavaScript] 0
2020-04-08 17:22:33.914 [info][tid:com.facebook.react.JavaScript] 1
2020-04-08 17:22:33.929 [info][tid:com.facebook.react.JavaScript] 2
2020-04-08 17:22:33.946 [info][tid:com.facebook.react.JavaScript] 3
2020-04-08 17:22:33.960 [info][tid:com.facebook.react.JavaScript] 4
2020-04-08 17:22:33.976 [info][tid:com.facebook.react.JavaScript] 5
2020-04-08 17:22:33.988 [info][tid:com.facebook.react.JavaScript] 6
2020-04-08 17:22:34.004 [info][tid:com.facebook.react.JavaScript] 7
2020-04-08 17:22:34.019 [info][tid:com.facebook.react.JavaScript] 8
2020-04-08 17:22:34.035 [info][tid:com.facebook.react.JavaScript] 9
2020-04-08 17:22:34.107 [info][tid:com.facebook.react.JavaScript] 0
2020-04-08 17:22:34.117 [info][tid:com.facebook.react.JavaScript] 1
2020-04-08 17:22:34.124 [info][tid:com.facebook.react.JavaScript] 2
2020-04-08 17:22:34.135 [info][tid:com.facebook.react.JavaScript] 3
2020-04-08 17:22:34.143 [info][tid:com.facebook.react.JavaScript] 4
2020-04-08 17:22:34.155 [info][tid:com.facebook.react.JavaScript] 5
2020-04-08 17:22:34.166 [info][tid:com.facebook.react.JavaScript] 6
2020-04-08 17:22:34.175 [info][tid:com.facebook.react.JavaScript] 7
2020-04-08 17:22:34.184 [info][tid:com.facebook.react.JavaScript] 8
2020-04-08 17:22:34.191 [info][tid:com.facebook.react.JavaScript] 9
2020-04-08 17:22:34.199 [info][tid:com.facebook.react.JavaScript] 10
2020-04-08 17:22:34.619 [info][tid:com.facebook.react.JavaScript] 0
2020-04-08 17:22:34.627 [info][tid:com.facebook.react.JavaScript] 1
2020-04-08 17:22:34.634 [info][tid:com.facebook.react.JavaScript] 2
2020-04-08 17:22:34.640 [info][tid:com.facebook.react.JavaScript] 3
2020-04-08 17:22:34.646 [info][tid:com.facebook.react.JavaScript] 4
2020-04-08 17:22:34.653 [info][tid:com.facebook.react.JavaScript] 5
2020-04-08 17:22:34.660 [info][tid:com.facebook.react.JavaScript] 6
2020-04-08 17:22:34.668 [info][tid:com.facebook.react.JavaScript] 7
2020-04-08 17:22:34.676 [info][tid:com.facebook.react.JavaScript] 8
2020-04-08 17:22:34.683 [info][tid:com.facebook.react.JavaScript] 9
2020-04-08 17:22:34.689 [info][tid:com.facebook.react.JavaScript] 10
2020-04-08 17:22:34.695 [info][tid:com.facebook.react.JavaScript] 11
2020-04-08 17:22:34.704 [info][tid:com.facebook.react.JavaScript] 12
2020-04-08 17:22:34.717 [info][tid:com.facebook.react.JavaScript] 13
2020-04-08 17:22:34.726 [info][tid:com.facebook.react.JavaScript] 14
2020-04-08 17:22:34.740 [info][tid:com.facebook.react.JavaScript] 15
2020-04-08 17:22:34.750 [info][tid:com.facebook.react.JavaScript] 16
2020-04-08 17:22:34.763 [info][tid:com.facebook.react.JavaScript] 17
2020-04-08 17:22:34.774 [info][tid:com.facebook.react.JavaScript] 18
2020-04-08 17:22:34.787 [info][tid:com.facebook.react.JavaScript] 19
2020-04-08 17:22:34.796 [info][tid:com.facebook.react.JavaScript] 20
2020-04-08 17:22:34.869 [info][tid:com.facebook.react.JavaScript] 0
2020-04-08 17:22:34.875 [info][tid:com.facebook.react.JavaScript] 1
2020-04-08 17:22:34.883 [info][tid:com.facebook.react.JavaScript] 2
2020-04-08 17:22:34.889 [info][tid:com.facebook.react.JavaScript] 3
2020-04-08 17:22:34.895 [info][tid:com.facebook.react.JavaScript] 4
2020-04-08 17:22:34.901 [info][tid:com.facebook.react.JavaScript] 5
2020-04-08 17:22:34.907 [info][tid:com.facebook.react.JavaScript] 6
2020-04-08 17:22:34.913 [info][tid:com.facebook.react.JavaScript] 7
2020-04-08 17:22:34.920 [info][tid:com.facebook.react.JavaScript] 8

这是请求第一页数据(有40条) FlatList renderItem index的打印
为什么是1-10 再1-20 再1-30 …… 导致大量调用render函数
不应该是直接1-40？

你不贴代码等着谁上门调试吗

你不贴代码等着谁上门调试吗

import React from 'react';
import {
  FlatList,
  TouchableOpacity,
  View,
} from 'react-native';



export default class Test extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
         data: []
      };
    }

    componentDidMount() {
       this._request()
    }


    _request = () => {
      var data = []
      for (let i = 0; i < 40; i++) {
          data.push(i)
      }

       this.setState({ data: data})

    }

    _renderItem = (dic) => {
        return <TestCell 
        data={dic} 
        navigation={this.props.navigation} 
        currentPeriod={this.currentPeriod} 
        tag={this.state.tag} 
        systemTagId={this.systemTagId}>
        </TestCell>
    }  

    render() {
       return <FlatList
            style={{ flex: 1 }}
            extraData={this.state}
            data={this.state.data}
            keyExtractor={(item, index) => index.toString()}
            renderItem={this._renderItem}
          ></FlatList>
    }



}

class TestCell extends React.Component {


    constructor(props) {
        super(props)
        this.state = {

        }
    }

    
    render() {
        var item = this.props.data.item
        var index = this.props.data.index
        console.log(index)
        
        return <TouchableOpacity 
        activeOpacity={1} 
        style={{ paddingHorizontal: 10, paddingTop: 10 }} 
        onPress={() => {

        }}>
            <View style={{
                height:30,
                borderWidth: 1,
                borderRadius: 4,
                paddingHorizontal: 10,
                paddingTop: 5,
                paddingBottom: 10,
                backgroundColor: '#fff',
            }}>
                
            </View>
        </TouchableOpacity>
    }
}

谢谢大佬

renderItems确实会被调用多次，官方没有给出明确的说法（是设计如此还是bug？），也有一些优化的pr但是官方目前都在搁置中（例如https://github.com/facebook/react-native/pull/27115）
目前开发者能做的就是保证Cell组件是一个PureComponent（即便被反复调用，但在数据不变的情况下不会重新渲染）

renderItems确实会被调用多次，官方没有给出明确的说法（是设计如此还是bug？），也有一些优化的pr但是官方目前都在搁置中（例如https://github.com/facebook/react-native/pull/27115）
目前开发者能做的就是保证Cell组件是一个PureComponent（即便被反复调用，但在数据不变的情况下不会重新渲染）

🤩 这么晚能看到大佬回答谢谢明白了

renderItems确实会被调用多次，官方没有给出明确的说法（是设计如此还是bug？），也有一些优化的pr但是官方目前都在搁置中（例如https://github.com/facebook/react-native/pull/27115）
目前开发者能做的就是保证Cell组件是一个PureComponent（即便被反复调用，但在数据不变的情况下不会重新渲染）

还有两个疑问：
1、用PureComponent不是为了减少render的次数么为什么还反复调用。
2、用了PureComponent ，render函数反复调用，即使数据不变的情况下不会重新渲染，这里必然存在大量的比较(diff算法?)，如果这个cell很复杂，就算不重新渲染，这里是不是也有不小的损耗？对于cell很复杂情况，有没有更好的做法，减小第一页的条数到10条？

List的renderItems会被反复调用，但是Cell是一个PureComponent的话，就是即便被调用，也不会执行其render
PureComponent就是用===符号来做比较，算是最简单的比较算法了。
FlatList有各种调优参数，文档里都有详细说明

会执行其render

我把上面例子的Component改成PureComponent 也是打印一样的结果

===只能判断基本数据类型，你传递的数据中有一些并非基本数据类型，这种情况下要么改变数据结构，要么自定义shouldComponentUpdate

===只能判断基本数据类型，你传递的数据中有一些并非基本数据类型，这种情况下要么改变数据结构，要么自定义shouldComponentUpdate

谢谢大佬明白了是我写法的问题 PS:我也找到一篇文章http://guangy.coding.me/2018/12/20/rn-improve-flatlist/ 后面看到这个问题的人希望这个会有所帮助😁

所有涉及到浅比较的，包括 pureComponent,connect,memo也好，需要注意改变值的时候切断引用关系，不然可能就不会刷新。

所有涉及到浅比较的，包括 pureComponent,connect,memo也好，需要注意改变值的时候切断引用关系，不然可能就不会刷新。

好的谢谢

我也遇到了同样的问题。请问最后是怎样解决的，上面那个网址上不去了

我也遇到了同样的问题。请问最后是怎样解决的，上面那个网址上不去了

自定义cell cell 继承由Component改成PureComponent

Navigation Menu

Repository navigation

关于FlatList的卡顿问题 #113

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

关于FlatList的卡顿问题 #113

Description

Activity

GWCodeN commented on Apr 8, 2020

sunnylqm commented on Apr 8, 2020

GWCodeN commented on Apr 8, 2020

sunnylqm commented on Apr 8, 2020

GWCodeN commented on Apr 8, 2020

GWCodeN commented on Apr 9, 2020

sunnylqm commented on Apr 9, 2020

GWCodeN commented on Apr 9, 2020

sunnylqm commented on Apr 9, 2020

GWCodeN commented on Apr 9, 2020

Han3Jim commented on Apr 14, 2020

GWCodeN commented on Apr 14, 2020

liulianzi commented on May 5, 2020

GWCodeN commented on May 5, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions