Предположим, у меня есть большой HTML-документ с многочисленными компонентами React, встроенными в его части.Группировка большого набора вызовов ReactDOM.render() в корневом компоненте
Например:
<body>
<h1 id="react-component-1">...</h1>
<p>Static Content</p>
<h2> id="react-component-2">...</h2>
<img src="static-img" />
<p id="react-component-3">...</h3>
</body>
Как вы можете видеть, есть статические элементы, между моими динамическими элементами. Я бы предположил, что эта ситуация распространена на веб-сайтах, которые медленно привносят в нее инструментальную цепочку.
Сейчас мое приложение работает так:
function renderPage(data) {
ReactDOM.render(<Component {...data} />, document.getElementById("react-component-1"));
ReactDOM.render(<Component {...data} />, document.getElementById("react-component-2"));
ReactDOM.render(<Component {...data} />, document.getElementById("react-component-3"));
}
renderPage() призывается успех АЯКСА запроса. Это делает мои компоненты обновленными по своему усмотрению, и это выглядит довольно эффектно.
Однако было бы гораздо приятнее, если бы у меня был компонент React, который обрабатывал состояние приложения, и сместил изменения в data в качестве реквизита.
Я не могу создать компонент root, потому что не все на моей странице динамическое, мне нужно сохранить статическое содержимое между компонентами React.
Я хотел бы быть в состоянии сделать что-то вроде этого, хотя:
class Root extends React.Component {
constructor(props) {
super(props);
this.data = {...};
}
render() {
ReactDOM.render(<Component {...this.state.data} />, document.getElementById("react-component-1"));
ReactDOM.render(<Component {...this.state.data} />, document.getElementById("react-component-2"));
ReactDOM.render(<Component {...this.state.data} />, document.getElementById("react-component-3"));
}
return false;
}
Можно ли использовать Реагировать таким образом? Сначала я не знаю, как это будет возможно, потому что ReactDOM ожидает, что элемент будет отображать компоненты в, что позволит очистить мой статический контент, когда я отрисую свой корневой компонент. Теперь я думаю, что могу просто сделать new Root(), но мне еще предстоит проверить это.
Еще одна возможность, о которой я только думал, заключалась в том, чтобы поддерживать функцию renderPage() и называть ее ONCE, а не каждый раз, когда загружается AJAX. Затем каждый компонент будет прослушивать настраиваемое событие, которое запускается с успехом AJAX, который содержит новые данные. Это кажется медленнее, хотя ... И я мог бы также использовать Redux для состояния приложения.
Это неправильный способ реагирования, все дело в том, что у вас есть модульные компоненты, которые вы можете использовать снова и снова. Вы должны подумать о том, какие типы компонентов у вас есть, h1, h2, & p из вышеперечисленного как отдельные компоненты, как только у вас есть передача статических данных, поскольку реквизиты - это путь. Проверьте это: https://facebook.github.io/react/docs/thinking-in-react.html – JordanHendrix
Я знаю, как React предназначен для использования. Нет никаких признаков того, что в моем примере кода существуют негибкие или избыточные компоненты. К сожалению, вам не хватает. Пример использования здесь заключается в том, что не все содержимое на странице может быть React. Есть много элементов, которые не будут носить динамический характер, но я хотел бы обернуть все в компонент уровня корня, чтобы я мог использовать жизненный цикл компонента, чтобы обновить реквизиты моих динамических элементов. – lostPixels
Умм, это именно то, что я сказал ... поставьте нединамический материал в реагирующем компоненте ... вам не нужно использовать реквизиты, вы можете просто поместить контент по своему усмотрению: точно так же, как и ответ ниже. Это не перекресток, а то, как это делается. Это лучшая практика для того, о чем вы просите. И, как говорится в ответе, вы находитесь в мире обид, если эта вещь растет, и вы должны ее изменить. – JordanHendrix