包括React組件-加載時間和最佳實踐

Question

我是React的新手（來自AngularJS）並建立了一個hello world示例，如下所示：

<div class="container">

    React says...
    <div class="react-app"></div>

    <script type="text/babel">
        class App extends React.Component {
            render() {
                return <div className="h3">hello react</div>
            }
        }
        var mount = document.querySelector('.react-app');
        ReactDOM.render(<App />, mount);
    </script>

</div>

..在頁面上顯示“你好反應”。

在上面的示例中，我的React組件直接放在<script>標簽中的頁面上。

但是假設我想組織我的組件，將它們放置在單獨的js文件中，並將它們包括在頁面中，如下所示：

<div class="container">

    React says...
    <div class="react-app"></div>

    <script type="text/babel" src="path/to/react_component.js" ></script>

</div>

這可以工作，但是在“反應說...”加載和“你好反應”之間存在明顯的延遲。

在AngularJS中，有一個ng-cloak指令可防止在JS解析時加載頁面。 React有這樣的事情嗎？

另一方面，將React組件直接放置在HTML中會立即加載所有內容-我是否應該將所有組件直接放置在HMTL模板中？ 可能會因較大的組件而變得混亂。

最佳實踐是什么？

Answer 1

<script type="text/babel">在運行時轉換JSX，並確實有助於初始化時間。 它可以用於演示目的，但不應在實際應用中使用。 正確的方法是加載已構建的腳本。

AngularJS ng-cloak無法達到問題中建議的目的。

ngCloak指令用於防止AngularJS html模板在加載應用程序時由瀏覽器以其原始（未編譯）形式短暫顯示。 使用此偽指令可避免由html模板顯示引起的不希望的閃爍效果。

React沒有可以以未編譯形式顯示的HTML模板-JSX除了腳本之外沒有出現。