В React обычный способ определения стилей похож на следующий, где вы определяете свои стили / стили CSS в том же файле, что и компонент, в качестве константы:

import React, { Component } from "react";
class StaticTitle extends Component {
    render() {
        const { title } = this.props;
        return <span style={styles.title}>{title}</span>;
    }
}
const styles = {
    title: {
        fontSize: 48,
    }
}

Эти стили жестко запрограммированы, и размер нашего компонента заголовка никогда не изменится.

Предположим, вы хотите, чтобы ваш компонент Title имел другой размер шрифта в зависимости от переданного вами пропаsize. Это было бы невозможно с использованием жестко запрограммированной константы стилей, поскольку она находится за пределами нашего класса компонентов и не имеет доступа к size опора

Как сделать ваши стили динамичными?

  1. Встроенные стили
import React, { Component } from "react";
class StaticTitle extends Component {
    render() {
        const { title, size } = this.props;
        return <span style={{ fontSize: size }}>{title}</span>;
    }
}

Это работает в большинстве случаев, но если у нас есть большое количество встроенных стилей, мы могли бы объединить наши стили в один объект.

2. Объект Styles в нашей функции рендеринга

import React, { Component } from "react";
class StaticTitle extends Component {
    render() {
        const { title, size } = this.props;
        const styles = {
            container: {
                fontSize: size
            }
        };
        return <span style={styles.container}>{title}</span>;
    }
}

Это хорошо и может хорошо работать, если вы хотите использовать что-то вроде React Native или StyleSheet.create от Aphrodite для создания объекта стилей.

Но как насчет производительности? Если вы искренне беспокоитесь о необходимости создавать новый объект стилей при каждом рендеринге, то следующее решение для вас. Но в большинстве случаев вам не нужно использовать следующий метод.

3. Если вы испытываете проблемы с производительностью, выполняйте повторную визуализацию только в том случае, если ваше свойство size - единственное, что меняет

React предоставляет метод жизненного цикла под названием shouldComponentUpdate, чтобы сообщить компоненту, стоит ли пытаться повторно выполнить рендеринг компонента. Если shouldComponentUpdate возвращает true (что он делает по умолчанию, если вы не определяете функцию shouldComponentUpdate), то он будет повторно визуализироваться всякий раз, когда его родительский объект повторно выполняет рендеринг.

Мы можем воспользоваться этим методом жизненного цикла, чтобы сократить процесс рендеринга, вернув false, когда ни один из свойств или состояния компонента не изменился. Вот так:

import React, { Component } from "react";
class StaticTitle extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        if (
            /* WARNING: Check here to make sure nextState is
               deeply equivalent to this.state and the 
               nextProps is deeply equivalent to
               this.props, or else you might
               run into a bug where your rendering short-circuits
               when it's not supposed to /*
        ){
            return false;
        }
        return true;
   }
    render() {
        const { title, size } = this.props;
        const styles = {
            container: {
                fontSize: size
            }
        };
        return <span style={styles.container}>{title}</span>;
    }
}

Выполнение чего-то подобного позволит вашему коду сократить процесс рендеринга, чтобы он происходил только тогда, когда это необходимо вашему компоненту.

Но одно предупреждение: в shouldComponentUpdate убедитесь, что вы тщательно сравниваете ваши nextStates с this.state и nextProps с this.props, иначе вы можете столкнуться с ошибка, из-за которой происходит короткое замыкание при рендеринге, когда этого не должно быть.

Как и все оптимизации, этот последний метод следует применять только в том случае, если вы испытываете проблемы с производительностью. Преждевременная оптимизация - это возможность внести ошибки, и методы 1 и 2, скорее всего, идеально подходят для большинства потребностей.

С помощью методов 1 и 2 вы теперь должны иметь возможность обрабатывать динамические стили с помощью escape-штриховки в методе 3, если у вас когда-либо возникнут проблемы с производительностью с динамическими стилями в ваших компонентах React / React Native. Удачного взлома!