Компиляция и обслуживание компонентов React по отдельности

Мы используем Laravel Mix для компиляции реагирующих компонентов и подачи их по отдельности на соответствующие страницы, где они необходимы — это не SPA.

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

Таким образом, приведенный ниже шаблон был скопирован и вставлен в каждый компонент, изменив только селектор, например:

'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import ReduxPromise from 'redux-promise'
import App from './containers/App'
import reducers from './reducers'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancer = composeEnhancers(
    applyMiddleware(ReduxPromise),
)
const newstore = createStore(reducers, enhancer)

ReactDOM.render(
    <Provider store={newstore}>
        <App />
    </Provider>, document.querySelector('.component-foo')
)

Некоторые компоненты также немного отличаются тем, как создается магазин, например. redux devtools присутствует не всегда.

Итак, исходя из Vue.js, для меня это не имеет особого смысла — в Vue.js вы использовали бы один файл для импорта всего, что связано с фреймворком, а затем загружали бы каждый нужный вам компонент с помощью одной строки кода. Но эта настройка React, похоже, делает прямо противоположное: загружает отдельный экземпляр React и Redux для каждого компонента на странице, как если бы у меня было несколько компонентов root/app в Vue.js.

Правильно ли предположить, что React собирается и загружается несколько раз, и будет ли это правильным способом?


reactjs javascript react-redux babeljs laravel-mix
person rzb    schedule 08.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы почти наверняка делаете это неправильно. Да, очень вероятно, что вы собираете и загружаете React несколько раз, но нет, это неправильный способ делать что-то. Кажется, вы пытаетесь использовать парадигму Vue для этого, но с кодом, скопированным из React SPA, поэтому вы строите это чудовище.

Могу ли я предложить ознакомиться с базовыми руководствами по реакции + laravel, прежде чем продолжить? простой поиск в Google показал следующее: https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443 и я уверен есть много других.

Поскольку вы новичок в реагировании, пока избегайте избыточности и просто ознакомьтесь с реагированием на несколько компонентов. только затем добавьте управление состоянием редукции, ЕСЛИ ВАМ ЭТО НУЖНО.

person swyx    schedule 08.12.2017
comment
К сожалению, монстр уже существовал до того, как я пришел. Я просмотрел туториалы по React, но мне еще предстоит найти тот, который описывает структуру такого типа. Не могли бы вы предоставить пример кода того, как вы будете использовать несколько компонентов на одной странице, если приложение не является SPA (то есть модульные компоненты, которые загружаются только на соответствующих страницах)? - person rzb; 08.12.2017