包括 React 组件 - 加载时间和最佳实践答案

【问题标题】：Including React Components - Loading time & best practices包括 React 组件 - 加载时间和最佳实践
【发布时间】：2018-02-27 21:26:34
【问题描述】：

我是 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>

..它在页面上打印“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 says...”加载和“hello react”之间存在明显的延迟。

在 AngularJS 中有一个 ng-cloak 指令来防止在 JS 解析时加载页面。 React 有这样的东西吗？

另一方面，将 React 组件直接放在 HTML 中会立即加载所有内容 - 我应该将所有组件直接放在 HMTL 模板中吗？较大的组件可能会弄乱..

这里的最佳做法是什么？

【问题讨论】：

您应该将所有 html 移到 React 组件中。将React says... 移动到您的<App> 组件中，您不会注意到初始加载时间。这是最佳实践。 body 中的唯一元素应该是 <div class="react-app"></div>。

标签： javascript angularjs reactjs react-native babeljs

【解决方案1】：

<script type="text/babel"> 在运行时转译 JSX，并确实有助于初始化时间。它可以用于演示目的，但不应该在实际应用中使用。一种正确的方法是加载已经构建的脚本。

AngularJS ng-cloak 不符合问题中建议的目的。

ngCloak 指令用于防止 AngularJS html 模板在您的应用程序加载时被浏览器以原始（未编译）形式短暂显示。使用该指令可以避免 html 模板显示引起的不良闪烁效果。

React 没有可以以未编译形式显示的 HTML 模板 - JSX 除了脚本不会出现在任何地方。

【讨论】：