分別編譯和提供React組件

Question

我們正在使用Laravel Mix來編譯React組件，並將它們分別提供給需要它們的各個頁面-這不是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實例，就像我在Vue.js中有多個root / app組件一樣。

假設React被捆綁和引導多次是否正確，這是否是正確的處理方式？

Answer 1

幾乎可以肯定，您做錯了。 是的，您很可能多次捆綁和啟動React，但這不是正確的方法。 似乎您正在嘗試使用Vue范例來執行此操作，但是要使用從React SPA復制的代碼，這就是為什么要構建這種怪異的原因。

我可以建議您在繼續之前檢查一下基本的react + laravel教程嗎？ 簡單的Google搜索顯示如下： https : //code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443 ，我敢肯定有很多其他。

由於您是新來的反應者，請暫時避免使用redux，而只是熟悉如何對多個組件進行反應。 只有在需要時才添加redux狀態管理。