Question

在我目前的用例中，我正在向ScrollView添加项目。我注意到，如果我将一个项目添加到状态中的项目集合中，则所有项目都会重新呈现。

我可以做任何解决方法吗？当前的实现必须是ScrollView，因此更改为FlatList或列表的任何其他实现都是无关紧要的。

<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>

谢谢

Answer 1

如果您的商品是 PureComponent ，除非您更改了道具，否则将不会在您将新商品添加到列表中时再次呈现...或者您可以实施 shouldComponentUpdate 方法，并指定何时该组件应再次呈现。

代码：

ScrollView：

<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() { ... } }

Answer 2

我会检查使用FlatList而不是使用一组状态中的地图来渲染ScrollView。基本上，一旦你更新this.state.items，你就要求重新报告与该州有关的任何事情。

我已经使用过此资源，它可以帮助您升级代码：

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

Answer 3

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

将项添加到ScrollView而不重新渲染所有项

3 个答案: