Reactがコンポーネントをアンマウント/再マウントするのを防ぐにはどうしたらいいですか？

Question

私はreact-routerとreact-reduxを使用しています。今

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

：EditNewとEditDraftがreact-reduxconnect関数を使用してEditor成分を包む容器をデータ提供さ

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

：私はこのような二つの経路を有しています、Editorは、ブランク入力を開始するとk Editorを入力すると、history.replaceState()が/editから/edit/:idに生成され、IDが生成されます。これが起こるとき、私は、次の一連のイベントを取得：

• EditorNewアンマウント
• Editorアンマウント
• EditorDraftレンダリングし
• Editorレンダリングし、私はこの二つをコード化すると

をマウントをマウントコンテナの両方に含まれているEditorコンポーネントがアンマウントと再マウント。これは余分な不必要な作業以外にいくつかの理由から私にとって問題であり、その中の主なものはアンマウントと再マウント後にエディタがフォーカスを失い、適切なカーソル範囲を終了することです。リアクトどのような特定の理にかなって、私はそれは同じコンポーネントの和解システムへのヒントにするEditorコンポーネントのkeyを指定して試してみましたが、私はshouldComponentUpdateを試してみたが、それは呼び出されません無駄に

されますやって

さらに複雑なrender()論理を持つ1つのコンテナに2つのコンテナを組み合わせる以外に、Editorコンポーネントが履歴の移行中にアンマウント/再マウントされないようにするためにできることはありますか？

Answer 1

React’s Reconciliation Algorithmは「古い木を切断し、構築します要素は、異なるタイプを（この場合は、EditNewとEditDraft）を持っていれば、その後、反応することを言います新しいツリーを最初から作成する」

これを防ぐには、両方のルートで同じコンポーネントを使用する必要があります。

Answer 2

あなたはそれがコンポーネントを更新されませんので、falseを返します（あなたのコンポーネントに接続されている状態から、この取得したルータの情報を確認することができます）ルートが/edit/:idに/editから変更された場合、shouldComponentUpdateを使用することができます。

Answer 3

react-router < = v3では、これが可能でない可能性があります。 react-router V4で

、これは現在可能でなければなりません：https://github.com/ReactTraining/react-router/issues/4578