Чи добре використовувати 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

ви, ймовірно, також можете подивитися на mustComponentUpdate, і це може збільшити продуктивність у майбутньому (напевно, не у вашому випадку). Ось посилання: facebook.github.io/react/docs/component-specs.html

— Джим

@YPCrumble, якщо відповідь хоперів правильна, будь ласка, позначте її

— Дана Вудман

А що з випадком, коли є кілька, ReactDOM.render()які повинні вставляти компоненти в однакові, divзалежно від того, яку сторінку ви відкриваєте? Зокрема, у вас є лише один невідомий об'єднаний app.jsоб’єкт, який ви маєте <script src="app.js">на кожній сторінці. І це завантажує libs, скажімо, jQuery, Bootstrap, React і має власний JS-код та React Components. Якщо ви відвідуєте /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')))

— бункер

Такий підхід з точки зору продуктивності завантаження сторінки нормальний, але є й інші недоліки, і, якщо можливо, слід уникати декількох коренів React.

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

Більше рейтингування - https://github.com/facebook/react/isissue/12700

— Янгшун Тай
джерело