Можно ли многократно использовать React.render () в DOM?

107

Я хочу использовать React для добавления компонентов несколько раз в DOM. Эта скрипка показывает, что я хочу делать, и не вызывает ошибок. Вот код:

HTML:

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JS:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

Я видел этот вопрос и боюсь, что, сделав это, я рискую, что компоненты React будут мешать друг другу. Ответ на этот вопрос предполагает использование рендеринга на стороне сервера, что для меня не вариант, поскольку я использую Django на стороне сервера.

С другой стороны, может быть, то, что я делаю, в порядке, потому что у меня смонтирован только один экземпляр библиотеки React (в отличие от нескольких компонентов, вызывающих собственный экземпляр React)?

Является ли такой способ использования нескольких экземпляров DOM нормальным способом использования React?

reactjs

— YPCrumble
источник

Ответы:

120

Да, совершенно нормально звонить React.renderнесколько раз на одной странице. Как вы и предполагали, сама библиотека React загружается только один раз, но каждый вызов React.renderсоздает новый экземпляр компонента, независимый от других. (Фактически, такая ситуация не редкость на сайтах, которые находятся в процессе перехода на React, где одни части страницы создаются с использованием, React.renderа другие нет.)

— бункер
источник

потрясающе - он также чрезвычайно полезен для "перезарядки" существующего приложения Django. Я хочу использовать Django для визуализированного контента, чтобы получить SEO, и использовать React для взаимодействия пользователя с элементами DOM. Это делает его очень простым в достижении.

— YPCrumble 08

вы, вероятно, также можете посмотреть shouldComponentUpdate, и он может повысить производительность в будущем (вероятно, не в вашем случае). Вот ссылка: facebook.github.io/react/docs/component-specs.html

— Джим,

@YPCrumble, если ответ хопперов правильный, отметьте его

— Дана Вудман

А как насчет случая, когда несколько ReactDOM.render()компонентов должны вставлять компоненты в одно и то же в divзависимости от того, какую страницу вы открываете? В частности, у вас есть только один уродливый объединенный app.jsактив, который есть <script src="app.js">на каждой странице. И это загружает библиотеки, скажем, jQuery, Bootstrap, React, и содержит ваш собственный код JS и компоненты React. Если вы посетите /foo, то у вас есть ReactDOM.render(<Foo />, getElemById('content')). Если вы посетите /bar', you have ReactDOM.render (<Bar />, getElemById ('content')) `. Они действительно мешают. Как вам это удается?

— Зеленый

@Green Я не уверен, что понимаю, если компоненты находятся на разных страницах, как они будут мешать? В противном случае, почему бы не добавить новый элемент контейнера для каждого компонента, например:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— hopper

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

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

Больше рейдов - https://github.com/facebook/react/issues/12700

— Яншун Тай
источник