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

Question

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

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

其中 EditNew 和 EditDraft 是提供数据的容器，使用 react-redux 包装了一个 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’s Reconciliation Algorithm表示如果元素具有不同的类型(在本例中为 EditNew 和 EditDraft)，那么 React 将“拆除旧树并从头开始构建新树。 ”

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