React Native 上的按钮和可触摸对象延迟

Question

我打算在我的应用程序中创建一个基本的电子商店，它运行良好。 flatlist 中的每个项目都有 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 调度操作，因为当我将它们全部删除或删除其中一个时，点击变得非常快速和流畅。

这是对reducer的处理：

   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

Answer 1

实际上问题是您在按下按钮时直接调度全局操作。这样做的副作用是当您按 + 或 - 时，reducer 将需要一些时间来进行计算并更改状态（这就是为什么由于 JS 线程被阻塞而出现延迟的原因）。最简单的解决方案是对于每个计数器，将增量或减量设为本地状态，并在 useEffect(或 componentDidUpdate) 内部同步，在一些去抖动后与 reducer 同步。流程是：

1. 将计数值以本地状态存储在计数器内
2. 将 debounce 设置为 500 毫秒，这样当用户在此时间内按下任何按钮时，它将忽略最后一次计数，仅在用户在 debounce 时间后离开计数器时更新。
3. 并在去抖动后与全局减速器同步。

我最近遇到了类似的情况。所以希望这会有所帮助。