почему питание память без гражданства компонент

Question

Просто быстрый вопрос, кому полюбилось реагировать

Я сделал jsbin example и я пытаюсь наблюдать, если реагировать делаем какую-либо оптимизацию памяти для лиц без компонентов

Если вы купите это окно, вы сможете увидеть экземпляр BsDiv. Означает ли это, что все компоненты, которые я использую, будут проводиться во время выполнения?

(я не занимающее какую-либо ссылку на этот объект сам)

Я беспокоюсь об этом, потому что срабатывают компоненты состоят из тех, что и так далее - что означает, что легко может быть как 5 экземпляры для любой панели, предупреждения и того, что я буду желать использовать.

Ожидается ли, что он будет вести себя так?

Answer 1

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

Это не без гражданства функциональный компонент:

class BsDiv extends React.Component{ 
    render(){ 
    return (<div className={this.props.cls}>{this.props.children}</div>) 
    } 
} 

Эти являются апатриды функциональные компоненты:

// component is just a function 
const BsDiv = props => <div className={props.cls}>{props.children}</div> 

// Using object destructuring syntax 
const BsDiv = ({cls, children}) => <div className={cls}>{children}</div>; 

Второе: Реагировать пока не применяются какие-либо существенные оптимизированная для лиц без функциональных компонентов ,

От their blog (курсива):

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

Таким образом, при написании функциональных компонентов без гражданства вы выбираете будущие оптимизации. Реагент делает это для «более простых» компонентов.

Вот еще некоторая информация о возможных будущих оптимизаций:

https://github.com/facebook/react/issues/5677#issuecomment-165125151

How will React 0.14's Stateless Components offer performance improvements without shouldComponentUpdate?

Answer 2

Хорошие новости и плохие новости.

Сначала плохие новости. То, что вы наблюдаете, является правильным и ожидаемым. Реакция компонентов - это только объекты JavaScript, поэтому каждый экземпляр будет выделяться отдельно. Кроме того, листья компонентов React обычно приводят к множеству виртуальных компонентов DOM для каждого рендерингового компонента, которые также находятся в памяти.

Однако хорошие новости очень хорошие. В React мы обычно делаем только то, что видно на странице. Поэтому на практике распределение памяти редко бывает проблемой. Например, в фреймворках стиля JQuery обычно отображаются все вкладки веб-приложения независимо от того, видны они или нет. Переключение вкладок затем просто устанавливает «видимый» класс на выбранной вкладке. В отличие от React, содержимое невыделенных вкладок обычно не отображается, если только вкладка не выбрана.