React Native ListView列表多个数据源和状态机，取值，刷新状态机

最新推荐文章于 2025-01-24 11:36:33 发布

原创最新推荐文章于 2025-01-24 11:36:33 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #listview #状态机 #多个数据源

react-native 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个使用React实现的ListView组件优化方法，通过自定义dataSource来提高渲染效率，避免不必要的全部重新渲染，同时展示了如何初始化state并设置搜索参数。

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

constructor(props) {
        super(props);
        this.dataSource = Array(2).fill(
            new ListView.DataSource({
                /*判断这两行是否相同，就是是否发生变化，决定渲染哪些行组件，避免全部渲染，提高渲染效率*/
                rowHasChanged: (oldRow, newRow) => {
                    return oldRow !== newRow
                }
            })
        );
        this.state = {//状态机变量声明,
            selectTab: 0,
            listParams: Array(2).fill({
                dataArray: [],
                listState: CommonListView.STATE_INIT,
                enableLoadMore: false,
                pageNum: 1,
            }),
           searchParams: Array(2).fill({
                searchText: '',
                isHighlightFilter: false
            }),
        };
    }

componentDidMount() {
    this.setSearchParams({searchText: 'searchText', isHighlightFilter: true})
    this.dataSource[this.state.selectTab] = this.dataSource[this.state.selectTab].cloneWithRows(newArray);
}

 <ListView
       dataSource={this.dataSource[this.state.selectTab]}>
</ListView>

setSearchParams(obj = {}, callBack) {
        let newSearchParams = this.state.searchParams;
        newSearchParams[this.state.selectTab] = Object.assign({}, newSearchParams[this.state.selectTab], obj);
        this.setState({ // 重写setState, 刷新状态机
            searchParams: newSearchParams
        }, callBack && callBack())
    }