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

Question

I am using react-router and react-redux . I have two routes like this:

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

where EditNew and EditDraft are data-providing containers that wrap an Editor component using the react-redux connect function:

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

and

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 } />;
    }
}));

Now, Editor is rigged up in such a way that when you begin typing into a blank Editor , it triggers a history.replaceState() from /edit to /edit/:id with a ranomly generated ID. When this happens, I get the following sequence of events:

• EditorNew unmounts
• Editor unmounts
• EditorDraft renders and mounts
• Editor renders and mounts

When I coded these two containers, I thought that the Editor component contained in both of them would be reconciled without unmounting and remounting. This is problematic for me for several reasons besides the extra unnecessary work, chief among which are that the editor ends up losing focus and proper cursor range after the unmount and remount.

To no avail I have tried specifying key for the Editor component to hint to the reconciliation system that it's the same component, and I've tried shouldComponentUpdate , but that doesn't get called, which makes sense given what React is doing.

Apart from combining the two containers into one container with more complicated render() logic, is there anything I can do to prevent the Editor component from unmounting/remounting during the history transition?

Answer 1

React's Reconciliation Algorithm says that if the element has a different type (in this case, EditNew and EditDraft ), then React will “tear down the old tree and build the new tree from scratch.”

To prevent this, you need to use the same component for both routes.

Answer 2

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

Answer 3

Chances are that this isn't possible with react-router <= v3.

With react-router v4, this should be possible now: https://github.com/ReactTraining/react-router/issues/4578