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

Question

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

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

where 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()from /edit到/edit/:id一个生成的ID.发生这种情况时,我会得到以下事件序列:

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

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

无济于事我试图指定key为Editor暗示的和解制度,它是同一组件组成部分,我已经试过shouldComponentUpdate,但不会被调用,这使得给什么反应,是做的感觉.

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

Answer 1

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

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