Question

我是React的新手（来自AngularJS）＆amp;设置一个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>

..打印“hello react”到页面。

在上面的示例中，我的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>

这有效，但在“React说......”加载和“你好反应”之间存在明显的延迟。

在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不会出现在除脚本之外的任何地方。

包括React组件 - 加载时间和时间最佳做法

1 个答案: