ReactJSを使い始めましたプロップ検証機能ドキュメントに記載されているように、パフォーマンス上の理由から「開発モード」でのみ動作します。
React は、私が注釈を付けた特定のコンポーネントのプロパティを検証しているようですが、明示的に「開発モード」をオンにした覚えはありません。
開発モードをトリガー/切り替える方法を検索してみましたが、見つかりません。
ベストアンサー1
もう1つの回答は、Reactの外部のビルド済みファイルを使用していることを前提としていますが、これは正しいものの、ほとんどの人がそうするわけではありません。すべきReactをパッケージとして利用します。さらに、現時点では、ほとんどすべてのReactライブラリとパッケージまた同じ規則に従って、本番環境で開発時のヘルパーをオフに切り替えます。縮小された react を使用するだけでは、潜在的な最適化もすべて無視されてしまいます。
最終的に、魔法はprocess.env.NODE_ENVコードベース全体に React の参照を埋め込むことに帰着します。これらは機能トグルのように機能します。
if (process.env.NODE_ENV !== "production")
// do propType checks
上記は最も一般的なパターンであり、他のライブラリも同様です。したがって、これらのチェックを「無効」にするにはNODE_ENV、"production"
「開発モード」を無効にする適切な方法は、選択したバンドラーを使用することです。
ウェブパック
使用DefinePluginwebpack の設定では次のようになります:
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
})
ブラウザ化
使用エンビファイ変換して、browserify ビルドステップを実行しますNODE_ENV=production( "set NODE_ENV=production"Windows の場合)
結果
process.env.NODE_ENVこれにより、 のすべてのインスタンスが文字列リテラルに置き換えられた出力バンドルが生成されます。"production"
ボーナス
変換されたコードを縮小するときに、「デッドコード除去」を利用できます。DCEとは、縮小者が次のことを認識できるほど賢い場合です"production" !== "production"。いつもfalse なので、if ブロック内のコードが削除され、バイトが節約されます。