React Native FlatList优化

最新推荐文章于 2025-05-17 16:55:52 发布

coding_most

最新推荐文章于 2025-05-17 16:55:52 发布

阅读量709

点赞数

CC 4.0 BY-SA版权

分类专栏：移动端文章标签： react native

本文链接：https://blog.youkuaiyun.com/roadProgram/article/details/106741257

移动端专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在React Native中优化FlatList性能的方法，强调减少item渲染的重要性。通过在shouldComponentUpdate中自定义更新逻辑，并举例说明如何在数据源上操作以实现特定item的更新，从而避免全列表刷新，提高应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知React Native刷新控件一般都是采用setState,对于FlatList来说就要想办法减少item的渲染，采用shouldComponentUpdate自己定义什么情况下执行刷新，有时候可能会有这样的需求，指定某个item执行刷新，在React Native里面没有可以获取指定item的方式，只能在数据上做考虑，具体操作如下：

定义Item需要的数据源

export class ItemData{
    constructor(){
        //指定某种状态
        this.isChanged = false
    }
}

Item中增加业务需求判断，比如列表跳转详情，回调修改当前选择的列表Item数据，简易代码如下：

Item.js

//定义外部传递属性
static propTypes = {
    //数据
    data:PropTypes.object.isRequired,
    //是否改变
    isChanged:PropTypes.bool,
}
//定义外部属性默认值
static defaultProps = {
    isChanged:false,    
} 
shouldComponentUpdate(nextProps, nextState) {
    //判断什么情况下刷新
    return this.props.isChanged != nextProps.isChanged;
}

Main.js

//某种需要刷新item的场景
onChangeValueHandler = (index) => {
    //实际业务代码需要自己来判断
    let item = this.state.listDatas[index];
    item.isChanged = !item.isChanged;
    this.setState({
      listDatas:.....
    })
}
//渲染item 并以props的属性传入组件
onRenderItem = ({itemData}) => {
    return (<Item data={itemData} isChanged={itemData.isChanged}></Item>)
}

shouldComponmentUpdate里面可以根据业务的需求进行相关逻辑判断，最终都是以减少渲染次数达到优化。