2つのお気に入りのGoogle検索があります。
-クローバーが全速力で電車のトイレに投げ込まれたらどうなりますか？
-コンポーネントがリアクションで全面的に交換されるとどうなりますか？
そして、最初の質問が多かれ少なかれ明確な場合、2番目の質問はそれほど単純ではありません-Webpack-dev-server、Hot Module Replacement、React-Hot-Loaderはすぐにクロールします。
そして、すべてがうまくいきますが、この爆発的な混合物は単に機能せず、最初の複雑なコード、HOC、構成、デコレーター、ネイティブ矢印関数につまずきます。
一般に、誰もがReac-hot-loaderの3番目のバージョンを持っているわけではありません。
前文
実際、バージョン3には3つの問題がありました。
-react-proxy。これは、コンポーネントの古いバージョンを新しいものに「置き換える」ために使用され、矢印関数とはまったく友好的ではなく、コンテキストがしっかりと固定されています。
-バベルおよびトランスポートされた矢印関数の動作を保証するために、Babelプラグインはそれらを中間関数にラップしました。 彼がすべてのクラスでこれを行ったことを考えると、これはしばしば故障につながりました。 これらは一般的に機能しませんでした。
-コンポーネントの検索と置換のまさに原理。 これを行うには、すべての最上位変数を「登録」するbabelプラグインを使用しました。これにより、後で「この変数」が実際には「BigKonka」であり、プロキシを更新する必要があることがわかります。
すべては問題ありませんが、HOCは内部にクラスを作成でき、デコレーターは実際の変数を単に「装飾」します。 その結果、反応調整機能は、レンダリング時に、古いクラスの代わりに「完全に新しい」クラスを満たし、古いツリー全体をアンマウントします。
人気のある
知恵は言う ：
Webpackでセットアップする最も厄介なことの1つは、適切に機能するHot Module Replacementです。 適切に動作するということは、コンポーネントがローカル状態を維持することを意味します。 他のすべてがHRMを使用します（私の意見では）。
言い換えれば、通常の保存状態がない場合、このRHLの場合は必要ありません。
RHLへの旅は6か月前に始まりました。1週間（多くの時間）を費やして、React-hot-loaderの使用が耐えられないほど痛いので、この数年間、人々がReact-hot-loaderを使用した方法を理解しようとしました。 彼は痛みしかもたらさない。 そして、彼はPRを開きました。PRが静かに、なぜ、どこでRHLがコンポーネントをアンマウントするかを促し、人々がそれが機能しなかった理由を最終的に理解できるようにしました。 精神的な苦しみを何らかの形で軽減するために。
そして、私は芽のすべてを修正することにしました。
バージョン4をご紹介します！
簡単に説明します-バージョン4はほとんど常に動作します。 彼女には、現象の本質そのものに起因する制限がまだありますが、これらの「間違い」は、作品の正確さを保証します。 今すぐ試すことができます。RHLをバージョン4にアップグレードするだけです。
HMR、RHLとは何ですか？
HMRはホットスワップモジュールです。 サーバーで変更されたときにクライアント上の個々のモジュールを更新できるビルトインWebパックおよびパーセルメカニズム。 忘れないでください-これはもっぱら開発に関するものです。 追加のジェスチャーがなければ、彼は黙ってページを拒否します。
RHLは、react-hot-loaderであり、Reactが更新された要素を単純にレンダリングし、それ以外の処理を行わないようにすることを目的とした一連の手段です。
RHLは、「正しい」HMRを必要な形式で提供するものです。
HMRがモンキーパッチ、より良いTDD、BDDなどにつながるという代替理論があります。 そして、そこには真実の大きな低下があります。
バージョン4とバージョン3の違い
1. react-proxyの代わりに、
react-stand-inが使用されます-もう少し「javascript」ソリューションです。 主な違い-代役は「ラッパー」ではなく、プロキシではなく、実際のクラスから
継承するクラスです。
これは非常にトリッキーな瞬間です-あるコンポーネントを別のコンポーネントと交換するときが来たら-スタンドインは単にそのプロトタイプ（より正確には、そのプロトタイプのプロトタイプ）を変更します。
結果-これは決して変わりません。
2番目のトリッキーな瞬間は、コンストラクターで行われた変更（バケットによって追加されたものを含む）の転送です。 Standinは、古いクラスと新しいクラスをインスタンス化し、その後、変更を検索して繰り返しを試みます。
その結果、コンポーネントの更新後、componentWill / DidMountで行われた変更
を除くすべての変更が適用されます。 マウント/アンマウントが発生しなかったため、回避する必要があるのはまさにこれでした。
2. HOCおよびデコレータとのフレンドではない「登録」の代わりに、「hotReplacementRender」と呼ばれるメカニズムが使用されます。
コンポーネントの「更新」の瞬間が来ると、React-Hot-Loaderは古いツリーを保存し、新しいツリーのレンダリングを開始
します。
各要素をレンダリングした後、古いデータと新しいデータを「比較」する瞬間があります。実際には調整機能です。
新しいコンポーネントが古いコンポーネントと「非常に似ている」場合-これがそうである可能性があり、交換できます。
このアプローチは、コンポジション、デコレーター、および一般的にレンダープロップを簡単に突破します。 心配しない唯一の瞬間は、子の数またはシーケンスの変更です（キーが指定されていない場合）が、これはReactの性質そのものによるものです。
3.多くの人がHRMとRHLのセットアップにつまずいていました。 新しいバージョンでは、すべての構成が_one_コマンドに制限されています。
import React from 'react'; import {hot} from 'react-hot-loader'; const MySuperApplication = () => ...... export default hot(module)(MySuperApplication); <-----
ホット（モジュール）（MySuperApplication）の魔法は、現在のモジュールのHMRを自動的に構成し、この関数のHOC部分はAppContainerでMySuperApplicationをラップします。
すべて！ （プラスbabel-pluginは忘れないでください）
どこで機能しますか？ どこでも-Webpack、区画、typescript（babel-pluginを忘れないでください）。 すべての
例があります。
知っておくべき仕事の特徴
1.「登録済み」コンポーネントのみのプロキシにラップされたRHL v3。 v4は完全にすべてをまとめています。 理論的には、これは生産性には影響しませんが、何でも起こります。
2.現在のモジュールを自己受け入れとしてホット構成します。 ここでは、RHLが生き残ることができる「反応コンポーネント」以外はモジュールからエクスポートできないことを理解する必要があります。
現在の標準エラー：
-ローカル変数または一般的にレンダリングでホットを使用します（探偵と宣誓）
-HOCと機能にホットを使用-静かにすべてが壊れます。
ホット-コンポーネント専用です。
3. componentDidMountでタイマーを開始し、このタイマーが呼び出す関数を変更した場合、更新されません。 setTimeoutは既に関数へのリンクを受け取っているため、変更することはできません。
4.コードの分割-ホットで動的にロードする各コンポーネントをラップしてから、それ自体を更新するか、HMR / RHLに精通した「ローダー」を使用する必要があります。
-人気の
リアクションローダーは基本的に適切ではありません。 持っている場合-コンポーネントをホットでラップする方法を除いて、他のオプションはありません-いいえ。 （これが生産に影響を与えないことを忘れないでください）
-loadable-componentsは少し優れ
ています-ファイルを更新しようとしますが、インポートが機能するときに「hotReplacementRender」がすでにオフになっているため、問題が発生する可能性があります。
-ラップされたコンポーネントをAppContainerでラップし、状況を「保存」するため、100％
react-imported-componentはうまく機能しますが、そのSSRは少し
特定的であり、誰にも適していません。
5.これは終わりにはほど遠いと思います。
React-hot-loaderは特効薬ではなく、非常に役立つ非常に特殊なツールです。 そして多分そうではない。
試してみる時間？
現在、RCバージョンのリリースに近づいています。 バグを修正したり機能を追加したりすることはもうありません。 わずかなコードカバレッジのみを上げます。
今こそ、自分でRHLをインストールして試してみてください。 そして、発生するはずのすべての問題を報告する（もちろん！）すべきではない：D
一般的に-火災！
github.com/gaearon/react-hot-loader/tree/next
npm install react-hot-loader @ next