React Native lag with delay上的按钮和触摸屏
React Native lag with delay上的按钮和触摸屏
提问于 2021-06-28 23:00:43
我打算在我的应用程序中创建一个基本的e-shop，它工作得很好。扁平列表中的每一项都有3个按钮( TouchableOpacity )来设置数量。这些按钮非常慢:时钟和重新渲染之间只有1秒。这看起来像一个长按，但它是一个简单的点击：this is a simple video to show you
下面是详细的代码：
class Shop extends React.Component {
...
selectItem = (item, typeButton) => {
if (item.qte >= 0) {
switch (typeButton) {
case 'plus':
if (parseFloat(item.EshopPrice) <= parseFloat(this.state.score)) {
this.setState({
score: parseFloat(this.state.score).toFixed(2) - parseFloat(item.EshopPrice).toFixed(2),
})
const actionSum = { type: "INCREASE_SUM", value: item }
this.props.dispatch(actionSum)
} else {
this.showToast();
}
break;
case 'minus':
if (this.props.totaleQte > 0) {
item.qte = item.qte - 1
this.setState({
score: Number(parseFloat(item.EshopPrice).toFixed(2)) + this.state.score,
})
const actionSumMoin = { type: "DECREASE_SUM", value: item }
this.props.dispatch(actionSumMoin)
}
break;
case 'plus+':
if (parseFloat(item.EshopPrice) <= parseFloat(this.state.score)) {
item.qte = item.qte + 1
this.setState({
score: parseFloat(this.state.score).toFixed(2) - parseFloat(item.EshopPrice).toFixed(2),
})
const actionSum = { type: "SET_CURRENTSALE", value: item }
this.props.dispatch(actionSum)
} else {
this.showToast();
}
break;
default:
break;
}
}
};
...
render ()
...
return (...)
}我在同一个文件中的函数组件中调用此函数，该文件是flatlit的renderItem：
renderItem = ({ item }) => {
return (
<View style={StylesGift.buttonsContainer}>
{
item.qte === 0 ?
<TouchableOpacity
onPress={() => this.selectItem(item, 'plus+')}>
<Text style={[StylesGift.itemQte, StylesGift.roundItemQte]}>+</Text>
</TouchableOpacity>
:
<View style={StylesGift.buttonsQteContainer}>
<TouchableOpacity onPress={() => this.selectItem(item, 'minus')}>
<Text style={[StylesGift.itemQte, StylesGift.roundItemQte]}>-</Text>
</TouchableOpacity>
<Pressable
onPress={() => this.showModal(true, item)}>
<Text style={StylesGift.itemQte}>{item.qte}</Text>
</Pressable>
<TouchableOpacity onPress={() => this.selectItem(item, 'plus')}>
<Text style={[StylesGift.itemQte, StylesGift.roundItemQte]}>+</Text>
</TouchableOpacity>
</View>
}
</View>
)
}我认为问题出在setState({score: ...})和调度redux的操作中，因为当我删除所有它们或其中一个时，点击变得非常快速和流畅。
这是对减速机的处理：
case 'INCREASE_SUM':
const productShopIndex = state.Data.findIndex(item => item.ProductID === action.value.ProductID)
state.Data[productShopIndex].qte = state.Data[productShopIndex].qte + 1
nextState = {
...state,
sum: state.sum + parseFloat(action.value.EshopPrice),
}
return nextState || state
case 'DECREASE_SUM':
nextState = {
...state,
totaleQte: action.value.qte === 0 ? state.totaleQte - 1 : state.totaleQte,
sum: state.sum - parseFloat(action.value.EshopPrice),
}
return nextState || state回答 1
Stack Overflow用户
发布于 2021-06-28 23:24:54
实际上，问题是您在按下按钮的同时直接调度全局操作。这样做的副作用是当你按下+或-时，reducer将花费一些时间进行计算并改变状态(这就是为什么会有延迟，因为JS线程被阻塞了)。对此最简单的解决方案是对于每个计数器，使增量或减量作为本地状态和内部useEffect(或componentDidUpdate)同步，在一些去抖动之后与reducer进行计数。流程是：
- 将计数值存储在计数器内部的本地状态
- 使去抖动大约为500ms，这样当用户在此时间内按下任何按钮时，它将忽略最后一次计数，并且仅当用户在去抖动时间后离开计数器时才更新。
- 并在去抖动后与全局减速器同步。
我最近遇到了类似的情况。所以希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68165677
复制相关文章
相似问题
腾讯云开发者
