是否有更好的方法来更新或更改按下按钮后我的React Native元素中显示的内容？

Question

按下按钮后，我在更新元素方面遇到了一些延迟。作为我的菜鸟，我只能假设我正在使用setState不正确，并且有正确的做事方式与我不正当的方式。

下面的代码似乎很快就更新了新的数字，但在我的完整项目中，按下按钮和显示的内容之间的延迟非常慢，甚至可能是1/4秒。

import React from 'react';
import { StatusBar, StyleSheet, Text, View, TouchableWithoutFeedback, Dimensions } from 'react-native';

export default class App extends React.Component {

  constructor (props) {
    super(props);
    let screenWidth = Dimensions.get('window').width,
        screenHeight = Dimensions.get('window').height;
    this.state = {
      NumPadState: [styles.numpad, {top: 0}, {width: screenWidth}, {height: screenHeight}],
      NumpadOutput: ''
    }
  }

  numpadAddNumber =(number)=> {
    var output;
    if (number === 'cancel') {
      //output = '';
      //this.numpadClose();
    } else if (number === 'backspace') {
      output = this.state.NumpadOutput.slice(0, -1);
    } else {
      output = this.state.NumpadOutput + '' + number;
    }
    this.setState({
      NumpadOutput: output
    })
  }

  render() {
    return (
      <View style={this.state.NumPadState}>
        <View style={styles.numpadInner}>
          <View style={styles.numpadButtonsContainer}>
            <TouchableWithoutFeedback style={styles.numpadButtonsButton} onPress={() => this.numpadAddNumber(1)}>
              <View style={styles.numpadButtonsTextWrapper}>
                <Text style={styles.numpadButtonsText}>1</Text>
              </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback style={styles.numpadButtonsButton} onPress={() => this.numpadAddNumber(2)}>
              <View style={styles.numpadButtonsTextWrapper}>
                <Text style={styles.numpadButtonsText}>2</Text>
              </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback style={styles.numpadButtonsButton} onPress={() => this.numpadAddNumber(3)}>
              <View style={styles.numpadButtonsTextWrapper}>
                <Text style={styles.numpadButtonsText}>3</Text>
              </View>
            </TouchableWithoutFeedback>
            <View style={styles.numpadOutputView}>
              <Text style={styles.numpadOutputText}>{this.state.NumpadOutput}</Text>
            </View>
          </View>
        </View>
      </View>

    ); // end return
  } // end render
} // end export

const styles = StyleSheet.create({
  "numpad": {
    position: 'absolute',
    left: 0,
      zIndex: 9999,
      flex: 1,
    justifyContent: 'center',
    backgroundColor: 'hsla(0, 0%, 0%, 0.8)'
  },
  "numpadInner": {
    flex: 1,
    maxHeight: '80%',
  },
  "numpadButtonsContainer": {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: 'hsla(0, 0%, 90%, 1)',
  },
  "numpadButtonsTextWrapper": {
    width: '33%',
    height: '50%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  "numpadButtonsText": {
    fontWeight: 'bold',
    fontSize: 30,
    color: 'hsla(0, 0%, 13%, 1)',
  },
  "numpadOutputView": {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '50%',
    backgroundColor: 'hsla(0, 0%, 90%, 1)',
  },
  "numpadOutputText": {
    fontWeight: 'bold',
    fontSize: 30,
    color: 'hsla(0, 0%, 13%, 1)',
  }
});