对屏幕中的大量视图反应本机性能

时间:2018-12-15 22:02:01

标签: javascript performance react-native

我正在从事一个React-Native项目,因此,我应该在Screen中生成大量View元素。最后,我得到了想要的东西,但我怀疑它的性能很好。假设我的代码如下:

import React, { createElement } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';

const HEIGHT = Dimensions.get('window').height;

const redOrBlack = num => num%2 ? '#f00' : '#000';

const rows = () => {
  const rows = [];

  for (let i = 1; i <= HEIGHT; i += 1) {
    const row = createElement(
      View,
      {
        key: `row_${i}`,
        style: [styles.row, { backgroundColor: redOrBlack(i) }
      },
      null
    );
    rows.push(row);
  }
  return rows;
};

export default () => (
  <View style={styles.wrapper}>
    {rows()}
  </View>
);

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    position: 'relative'
  },
  row: {
    width: '100%',
    height: 1
  }
});

上面的代码只是我的项目的一小部分。屏幕中将建立大量View元素。我如何了解它的性能?请告诉我我的代码的性能。

0 个答案:

没有答案