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

Question

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

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

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

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到/edit/:id并带有一个生成错误的ID。 发生这种情况时，我会得到以下事件序列：

• EditorNew卸载
• Editor卸载
• EditorDraft渲染和安装
• Editor渲染和安装

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

无济于事我尝试为Editor组件指定key以向协调系统提示它是同一个组件，并且我尝试过shouldComponentUpdate ，但是没有调用，这在React正在做的事情中是有意义的。

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

Answer 1

React的Reconciliation算法表示，如果元素具有不同的类型（在本例中为EditNew和EditDraft ），则React将“拆除旧树并从头开始构建新树”。

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

Answer 2

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

Answer 3

react-router <= v3可能无法做到这一点。

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