如何确定React Native代码中的JS瓶颈？

Question

我将React Native Slider组件添加到现有应用程序中,并且更喜欢使用它的onValueChangeprop,以便当用户向左和向右滑动旋钮时,一些Text组件的值会根据Slider的当前值进行更新.

在第一次尝试时,在松开滑块旋钮后会导致大量滞后.StackOverflow不允许我在这里嵌入gif所以我将保留链接:http://imgur.com/sEowpZt

当我注释掉onValueChange并使用时onSlidingComplete,根本没有延迟,但是两个文本组件在滑动停止之前不会更新它们的值,这会降低效果.我怀疑是在setState电话里面onValueChange都以更快的速度堆积弱于他们正在处理/完成,它是与我的应用程序的其他部分.为了证实这一点,我创建了一个新的react native app react-native init,将其添加_renderNameYourPriceModal()到代码中,在屏幕上包含一个按钮以打开它,并发现根本没有延迟:http://imgur.com/iZnvDML

如何确定减慢setState现有应用程序调用的速度？我发现了React Perf工具,我正在使用它来在Chrome开发者控制台中打印一个汇总表.

import Perf from 'react-native/Libraries/Renderer/shims/ReactPerf'
...
  componentDidMount() {
    setTimeout(() => {
      Perf.start()
      setTimeout(() => {
        Perf.stop()
        const measurements = Perf.getLastMeasurements()
        Perf.printWasted(measurements)
      }, 7000)
    }, 1000)
  }

根据printWasted的Perf文档:

printWasted()

Perf.printWasted(measurements)

分析器中最有用的部分.

"浪费"时间花在没有实际呈现任何内容的组件上,例如渲染保持不变,因此未触及DOM.

但我不确定如何解释结果以进行必要的更改.例如,运行我的应用程序时该表的前四行(总共有24行)如下所示:

我不知道该看的第一线,"ItemDetailsScreen > View"里面Owner > Component列,指的是因为有单独在该屏幕上20+意见.对于进一步的上下文,我正在使用React-Navigation,这是StackNavigator内部的嵌套屏幕,虽然我没有看到对此屏幕状态的更新如何导致在层次结构中的屏幕上重新渲染.是否有必要将此屏幕进一步分解为更多自定义子组件,以便我覆盖shouldComponentUpdate,或者使printWasted结果准确说明哪些区域有故障？

这是我使用Slider返回Modal的函数:

  _renderNameYourPriceModal() {
    var likelihood = 'Possible'
    var lowestVal = 5
    var highestVal = 15
    if (this.state.nypValue < 6) {
      likelihood = 'Nearly Impossible'
    } else if (this.state.nypValue < 8) {
      likelihood = 'Highly Unlikely'
    } else if (this.state.nypValue < 10) {
      likelihood = 'Unlikely'
    }
    return (
      <Modal
        onRequestClose={() => { this.setState({nypModalVisible: false})}}
        animationType={"fade"}
        transparent={true}
        visible={this.state.nypModalVisible}>
        <View style={{paddingTop: 22, height: Dimensions.get('window').height, backgroundColor: 'rgba(252,84,102,0.9)', alignItems: 'center', justifyContent: 'center'}}>
          <View
            style={{
              height: Dimensions.get('window').height * 0.5,
              width: Dimensions.get('window').width * 0.9,
              backgroundColor: 'white',
              borderRadius: 10,
              alignItems: 'center'
            }}>
            <View
              style={{flex: 0.8, alignItems: 'center', justifyContent: 'center'}}>
              <View style={{flex: 0.25, flexDirection: 'row', width: Dimensions.get('window').width * 0.97, top: -10, alignItems: 'flex-start', justifyContent: 'center'}}>
                <View style={{flex: 0.1}}></View>
                <View style={{flex: 0.8, alignSelf: 'center', alignItems: 'center', justifyContent: 'center'}}>
                  <Text style={{fontSize: 23}}>Name Your Price</Text>
                </View>
                <View style={{flex: 0.1, top: -5, height: 40, alignItems: 'flex-end', justifyContent: 'flex-end'}}>
                  <TouchableHighlight
                    underlayColor={'gray'}
                    style={{height: 40, width: 40, backgroundColor: 'gray', borderRadius: 20, alignItems: 'center', justifyContent: 'center'}}
                    onPress={() => {
                      // close
                      this.setState({nypModalVisible: false})
                    }}>
                    <Text style={{fontSize: 25, color: 'white'}}>X</Text>
                  </TouchableHighlight>
                </View>
              </View>
              <View style={{flex: 0.25, width: Dimensions.get('window').width * 0.8, alignItems: 'center', justifyContent: 'flex-start'}}>
                <View style={{flex: 0.5, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
                  <View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}>
                    <Text style={{fontSize: 19}}>${lowestVal.toFixed(2)}</Text>
                  </View>
                  <View style={{flex: 0.6, alignItems: 'center', justifyContent: 'center'}}>
                    <Slider
                      style={{width: Dimensions.get('window').width * 0.5}}
                      maximumValue={15}
                      minimumValue={5}
                      step={0.5}
                      value={this.state.nypValue}
                      // onSlidingComplete={(val) => {
                      //   this.setState({nypValue: val})
                      // }}
                      onValueChange={(val) => {
                        // change value here
                        this.setState({nypValue: val})
                      }}
                      />
                  </View>
                  <View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}>
                    <Text style={{fontSize: 19}}>${highestVal.toFixed(2)}</Text>
                  </View>
                </View>
                <Text>${this.state.nypValue.toFixed(2)}</Text>
                <Text>Likelihood: {likelihood}</Text>
              </View>
              <View style={{flex: 0.5, paddingTop: 20, alignItems: 'center', justifyContent: 'flex-start', paddingHorizontal: 10}}>

                <Text style={{textAlign: 'center', top: 25, fontSize: 18}}>Let us know the price you'd like to see this item drop to, and we'll let YOU know when it does!</Text>
              </View>
            </View>
            <View style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}>
              <TouchableHighlight
                style={{height: 50, width: Dimensions.get('window').width * 0.8, alignItems: 'center', justifyContent: 'center', backgroundColor: '#70a8ff', borderRadius: 5}}
                underlayColor={'#70a8ff'}
                onPress={() => { }}>
                <Text style={{fontSize: 20, color: 'white'}}>Set Price Alert</Text>
             </TouchableHighlight>
            </View>
          </View>
        </View>
      </Modal>
    )
  }