Есть ли какое-либо влияние на производительность при использовании стилевых компонентов в реагирующем? - PullRequest
Новая
       18

Есть ли какое-либо влияние на производительность при использовании стилевых компонентов в реагирующем?

0 голосов
/ 16 марта 2020

Копаясь в библиотеке, я вижу, что она делает такую ​​тяжелую работу, как

  1. Ха sh расчет 
function generateStyleObject(executionContext) {
      var flatCSS = flatten(this.rules, executionContext).join('');
      var hash = generateComponentId(flatCSS);

      if (!generated[hash]) {
        var root = safeParse(flatCSS);
        var declPairs = [];
        root.each(function (node) {
          if (node.type === 'decl') {
            declPairs.push([node.prop, node.value]);
          } else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
            /* eslint-disable no-console */
            console.warn("Node of type " + node.type + " not supported as an inline style");
          }
        }); // RN currently does not support differing values for the corner radii of Image
        // components (but does for View). It is almost impossible to tell whether we'll have
        // support, so we'll just disable multiple values here.
        // https://github.com/styled-components/css-to-react-native/issues/11

        var styleObject = transformDeclPairs(declPairs, ['borderRadius', 'borderWidth', 'borderColor', 'borderStyle']);
        var styles = styleSheet.create({
          generated: styleObject
        });
        generated[hash] = styles.generated;
      }

      return generated[hash];
    };
выполнение большого количества циклов и сглаживание объектов. 
function css(styles) {
  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    interpolations[_key - 1] = arguments[_key];
  }

  if (isFunction(styles) || isPlainObject(styles)) {
    // $FlowFixMe
    return flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations)));
  }

  if (interpolations.length === 0 && styles.length === 1 && typeof styles[0] === "string") {
    // $FlowFixMe
    return styles;
  } // $FlowFixMe


  return flatten(interleave(styles, interpolations));
}

Таким образом, есть ли какое-либо влияние на производительность при использовании стилизованных компонентов в собственном проекте реакции большого размера, не содержащем стилизованных компонентов и css

...