分别编译和提供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状态管理。