0

在我当前的用例中，我将项目添加到ScrollView. 我注意到，如果我将一个项目添加到位于 state 中的项目集合中，所有项目都会重新呈现。

我有什么解决方法吗？当前实现必须是ScrollView，因此更改为FlatListList 或任何其他实现都无关紧要。

<View style={{flex: 1}}>
    <ScrollView>
      <TouchableWithoutFeedback accessible={false}>
        <View style={{flexDirection: 'column', alignItems: 'center'}}>
        {this.state.items.map(( item, key ) =>
        (
          <Flag country={item} key={key} />
        ))}
        </View>
      </TouchableWithoutFeedback>
    </ScrollView>
  </View>

谢谢

4

3 回答 3

1

如果您的项目是PureComponent，那么当您将新项目添加到列表时，它们将不会再次呈现，除非它们的道具已更改……或者您可以在常规组件中实现shouldComponentUpdate方法并指定该组件何时应再次呈现。

代码：

滚动视图：

<ScrollView>
    {data.map(item =>
        <ScrollViewItem itemInfo={item} />
    )}
</ScrollView>

带有 PureComponent 的 ScrollViewItem：

class ScrollViewItem extends React.PureComponent {
    ...
    render() {
        ...
    }
}

带有 shouldComponentUpdate 的 ScrollViewItem：

class ScrollViewItem extends React.Component {

    shouldComponentUpdate({ itemInfo }) {
        if(itemInfo.id != this.props.itemInfo) {
            return true;//this component will update
        }

        return false;//this component won't update 
    }
    ...
    render() {
        ...
    }
}
于 2019-10-18T17:56:32.567 回答
0

我会检查使用 FlatList 而不是使用来自一组状态的地图来呈现 ScrollView。本质上，一旦你 update this.state.items，你就要求重新渲染与该状态有关的任何东西。

我已经使用了这个资源，它应该可以帮助您升级代码：

http://matthewsessions.com/2017/05/15/optimizing-list-render-performance.html

于 2017-11-16T17:06:35.493 回答
0

就我而言，设置flexShrik: 0为滚动视图内的所有元素，解决了这个问题。

于 2021-02-26T14:43:24.400 回答