Можно ли многократно использовать 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а другие нет.)

бункер
источник
9
потрясающе - он также чрезвычайно полезен для "перезарядки" существующего приложения 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')) `. Они действительно мешают. Как вам это удается?
Зеленый
3
@Green Я не уверен, что понимаю, если компоненты находятся на разных страницах, как они будут мешать? В противном случае, почему бы не добавить новый элемент контейнера для каждого компонента, например:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))
hopper
3

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

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

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

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