Question

我在使用Angular几年后开始使用React，并试图找出加载组件的最佳方法，这些组件通常会调用Web服务并呈现结果。

我有一个Web表单解决方案，我正在添加React。我有一个React.Component类，它使用promises从一个单独的类中获取一些数据，然后呈现结果：

export default class TestControl extends React.Component<TestProps, TestState> {

constructor(props) {
    super(props);       
    this.state = { data: [] };
}

componentDidMount() {
    Data.GetData().then((result) => {
        this.setState((prevState, props) => {
            return { data: result };
        });
    });
}    

render() {
    return(
        <header>
            <div>
                {this.state.data.map(function (item, index) {
                    return <p>{item.title}</p>
                })
                }
            </div>
        </header>
    );        
    }
}

我也在使用webpack捆绑解决方案。 webpack.config非常标准，条目是.tsx。看起来像这样：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import TestComponent from "./components/TestComponent";
import * as $ from 'jquery'

$(document).ready(function () {
    ReactDOM.render(<TestComponent />, document.getElementById("test-component"));
});

所以我的理解是webpack不会捆绑任何未在此文件中引用和使用的内容。另外，与angular不同，我没有自定义标识符可以放在我的.aspx页面上，比如ng-controller =“x”，我希望控件呈现，我必须在页面上有一个普通的DOM元素然后使用ReactDOM。渲染传递元素的ID以使我的控件触发。

我显然希望我的控件尽可能快地加载，因此我的bundle .js位于＆lt;头＆gt;在我的react.js参考下面。这个问题是ReactDOM.render在我的元素出现在页面之前就开始了，所以我不得不介绍一个dom.ready但是这显然不是最好的。

我现在正在考虑分离我的组件类，以便单独检索数据（因此我可以在命中JS时立即触发它），然后在DOM准备好后通过状态/ props传递到React.Component。但这是正确的做法吗？虽然这仍然意味着我必须等到整个DOM准备就绪才能将这些数据传递给控件进行渲染，所以我猜这不是最好的。

我刚刚潜入这里，所以我可能会在这里的许多地方离开，但会欣赏一两个正确方向的指针。

感谢。

更新

用另一种方式说出我的问题：

在基本页面中，我有一个顶部导航。在Angular中我有一个控制器，一些服务并将它们捆绑到一个自定义的JS文件中。然后在标记中：

<head>
<script for custom JS>
</head>
<body ng-app="app">
<div ng-controller="topNav">

从在React中创建一个等效的解决方案，因为我必须调用ReactDOM.render并传入元素，所以必须在DOM元素之后引用自定义React类的JS。因此，虽然我的顶级导航代码和支持服务将在每个页面上都需要，但我需要将顶级导航组件类（或至少对它的ReactDOM.render调用）和支持类分离到不同的JS文件中。否则，我将在页面加载（底部）中加载所有JS，当支持类可能已经在头部加载时。所以我的标记看起来像这样：

<head>
<script with custom JS bundled by webpack with supporting React classes>
</head>
<body>
<div id="top-nav">
<script with top nav code and call to ReactDOM.render(<TopNav />, document.getElementById("top-nav")>

我的方法是否正确？与Angular相比，感觉这可能需要更长时间才能加载，因为Angular似乎会在出现时立即触发ng-controller？或者至少在DOM准备好之前。而且所有JS都可以进入1个捆绑文件。这里唯一的选择是在DOM元素之后加载JS或将它捆绑到头JS中，但只在JQuery（文档）.ready（）中调用ReactDOM.render，这样我们就可以确保元素ReactDOM.render依赖于在那里。

到目前为止，这一切都使用顶级导航元素并且看起来足够快但是必须在身体底部而不是头部引用单独的JS肯定会增加延迟相比，将它全部加载到头部？我只是想检查一下我是不是错过了如何在React中添加组件。

React.Component页面加载方法

0 个答案: