0

我有下一个代码：

import React from 'react'
import Loadable from 'react-loadable'
import { Route } from 'react-router-dom'

class App extends React.Component {
    state = {
        kappa: false
    }

    componentDidMount() {
        setTimeout(() => {
            setState({ kappa: true })
        }, 1000)
    }

    render() {
        return (
            <div className="app">
                <Route exact path="/:locale/" component={Loadable({
                    loader: () => import('../views/IndexPage/index.jsx'),
                    loading: () => "loading"
                })} />
                <Route exact path="/:locale/registration" component={Loadable({
                    loader: () => import('../views/Registration/index.jsx'),
                    loading: () => "loading"
                })} />

                {this.state.kappa && <p>Hey, Kappa-Kappa, hey, Kappa-Kappa, hey!</p>}
            </div>
        )
    }
}

当状态更新（kappa变为真并p出现）时，活动路由上的组件（无论它是什么 -IndexPage或Registration）重新安装。如果我在 App 中手动导入组件并将其传递给Route没有代码拆分的组件，则不会重新安装路由上的组件（这很明显）。

我也试过 webpack 的动态导入，像这样：

<Route path="/some-path" component={props => <AsyncView {...props} component="ComponentFolderName" />

whereimport(`/path/to/${this.props.component}/index.jsx`)运行componentDidMount并填充AsyncView的状态，它的行为类似于Loadable情况。

我想，问题是componentforRoute是一个匿名函数

问题是：如何避免重新安装路由组件？

4

1 回答 1

2

好吧，这种行为是正常的，并记录在 React Router 4 文档中：

当你使用组件（而不是渲染或子，下面）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您为组件属性提供内联函数，您将在每次渲染时创建一个新组件。这会导致现有组件卸载和新组件安装，而不是仅仅更新现有组件。使用内联函数进行内联渲染时，请使用 render 或 children 道具（如下）。

render与 React Loader 和 webpack 的代码拆分都可以正常工作。

于 2018-02-16T13:10:25.093 回答