4

私はreactjsを調査していますが、External JSX template( )に対するこのDouble Networkリク​​エストを見て驚いていますloginform.js。

どこ

index.html

<html>
<head>
    <title>Awan Demo</title>
</head>
<body>

Hello Sir!

<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx" src="loginform.js"></script>

</body>
</html>

および loginform.js

/** @jsx React.DOM */
    var LoginForm = React.createClass({
        render: function(){
            return <form id="f_loginform" method="POST">
                    UserName:<input type="text"/>
                    Password:<input type="password"/>
                </form>;
        }
    });
    React.renderComponent(<LoginForm/>, document.body);

この二重のリクエストを回避する方法はありますか?

詳細については、添付の画像を検討してください。

Chrome-v30 のスクリーンショット

4

1 に答える 1

5

script タグが表示されたときに Chrome がスクリプトをフェッチすることを主張する理由は、私には明らかではありません<script type="text/jsx" src="loginform.js"></script>。を認識しないため、リクエストを完全にスキップすることを期待していtypeます。

ただし、ブラウザー内の JSX トランスフォーマーは効率を考慮して設計されていないため、速度を重視する場合は本番環境で使用しないでください (コンソールにその旨の警告が表示されます)。代わりに、JS をパッケージ化して縮小するときは、JSX ファイルを生の JS にプリコンパイルする必要があります。これは、他の JS コードと同じように含めることができます。詳細については、React サイトのProductionizing: Precompiled JSXを参照してください。

于 2013-11-14T08:18:53.553 に答える