Question

我正在使用react-router和react-redux。我有两条这样的路线：

<Route path='/edit'     component={ EditNew } />
<Route path='/edit/:id' component={ EditDraft } />

其中EditNew和EditDraft是使用Editor react-redux函数打包connect组件的数据提供容器：

const EditNew = connect(state => ({}))(React.createClass({
    render() {
        return <Editor />;
    }
}));

和

const EditDraft = connect(state => ({ drafts: state.drafts }))(React.createClass({
    render() {
        const { params, drafts } = this.props;
        const draft = findDraft(params.id, drafts);
        return <Editor draft={ draft } />;
    }
}));

现在，Editor被绑定，当您开始输入空白Editor时，它会触发从history.replaceState()到/edit的{{1}}使用生成的错误ID。发生这种情况时，我会得到以下事件序列：

/edit/:id取消安装
EditorNew取消安装
Editor呈现和装载
EditorDraft呈现和装载

当我对这两个容器进行编码时，我认为两者中包含的Editor组件将在不卸载和重新安装的情况下进行协调。除了额外的不必要的工作之外，这对我来说是有问题的，其中主要的是编辑器在卸载和重新安装后最终失去焦点和正确的游标范围。

无效我已尝试为Editor组件指定key，以便向对帐系统提示它是同一个组件，我已经尝试了Editor，但这并不是'被调用，这在React正在做的事情上是有意义的。

除了将两个容器合并到一个具有更复杂shouldComponentUpdate逻辑的容器之外，我还能做些什么来阻止render()组件在历史转换期间卸载/重新安装？

Answer 1

React’s Reconciliation Algorithm表示如果元素具有不同的类型（在本例中为EditNew和EditDraft），则React将“拆除旧树并从中构建新树划痕“。

为了防止这种情况，您需要为两个路径使用相同的组件。

Answer 2

react-router＆lt; = v3。

可能无法做到这一点

使用react-router v4，现在应该可以：https://github.com/ReactTraining/react-router/issues/4578

Answer 3

您可以使用shouldComponentUpdate，如果路由已从checkSize()更改为/edit（您可以检查这是从连接到您的组件的状态获取路由器信息）返回false，所以它不会刷新组件。

如何防止React卸载/重新安装组件？

3 个答案: