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

【问题标题】：How can I prevent React from unmounting/remounting a component?如何防止 React 卸载/重新安装组件？
【发布时间】：2016-01-14 02:09:39
【问题描述】：

我正在使用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 时，它会触发一个从 /edit 到 /edit/:id 的带有随机生成 ID 的 history.replaceState()。发生这种情况时，我会得到以下事件序列：

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

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

无济于事，我尝试为 Editor 组件指定 key 以提示协调系统它是同一个组件，并且我尝试了 shouldComponentUpdate，但没有被调用，这使得考虑到 React 正在做什么。

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

【问题讨论】：

听起来它正在按应有的方式工作；您正在更改顶级组件，其中Editor 是一个子组件，因此它应该被完全销毁并在新的父组件下重新创建。
所以我应该合并容器吧？我正在查看github.com/rackt/redux-router，但考虑到我想尽快将其迁移到 Relay，我不想向该项目添加更多内容。
是的，我建议使用单个容器，特别是因为您在谈论同一事物的不同状态，而不是在完全不同的容量中使用 Editor。
谢谢，会这样做的。

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以使用shouldComponentUpdate，如果路由已从/edit 更改为/edit/:id（您可以检查从连接到您的组件的状态中获取路由器信息）返回false，因此不会刷新组件。

【讨论】：

【解决方案3】：

react-router

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

【讨论】：