Правильное размещение переменной стиля в компоненте класса React

Question

Может ли кто-нибудь прокомментировать разницу в React между переменными стиля:

• вне функции компонента класса, но в скрипте компонента, против
• в теле компонента, но вне оператора return, против
• в операторе возврата, но вне функции рендеринга, против
• в функции рендеринга

Каждый из них будет работать, но я не понимаю, почему один может быть предпочтительнее другого.

export default class MyComponent extends Component {
    putStyleHere = { color: '#eee' }
    render() {
        const orPutStyleHere2 = { color: '#eee' }
        return (
            const orPutStyleHere3 = { color: '#eee' }
            <p style={putStyleHere}>Hello, world!</p>
        )
    }
}
const orPutStyleHere4 = { color: '#eee' }

Заранее спасибо.

Answer 1

Лучше всего иметь константы вне функции рендеринга, чтобы они не были повторно объявлены / переназначены при каждом рендеринге [до тех пор, пока значение константы не изменится, что похоже на случай в вашем сценарии]