代码之家 › 专栏 › 技术社区 › AmerllicA

反应本机性能以获得屏幕上的大量视图

react-native performance javascript

AmerllicA · 技术社区 · 7 年前

我正在做一件事 React-Native 项目,出于某种原因,我应该产生大量的 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
  }
});

上面的代码是我项目的一小部分。大量的 看法 元素将在屏幕中生成。我如何理解它的性能?请告诉我代码的性能。