React-原生和redux动画性能onPress

Question

我正在呈现一个ListView，每一项都是一个带有onPress的TouchableHighlight，它会分派一个加载数据的操作。数据存储在状态中，这导致应用程序的另一个部分呈现在列表下面。

在Android上，连续按下列表项会导致动画延迟到ajax请求完成之后。有没有办法把重点放在第一位，这样反馈就不会被延迟？

//Handler
handleOnPress = () => {
    dispatch(makeAjaxRequest())
}

// Component
<TouchableHighlight onPress={this.handleOnPress}>
    <Text>List item</Text>
</TouchableHighlight>

Answer 1

如果你以这种方式使用handleOnPress函数，通过渲染页面，所有的onPress事件都会调用，这会导致很多不必要的handleOnPress函数调用，如果你将onPress属性修改为onPress={this.handleOnPress}，这个函数只会在你按下TouchableHighlight项时调用，它将帮助你减少延迟并正确地控制状态。您的代码将如下所示：

//Handler
handleOnPress = () => {
    dispatch(makeAjaxRequest())
}

// Component
<TouchableHighlight onPress={this.handleOnPress}>
    <Text>List item</Text>
</TouchableHighlight>