Question

我试图在html5 SPA世界中找到相当于.Net usercontrol的东西。 react组件是否属于此angular指令。我想创建由多个渲染组件组成的自包含页面部分（网格，图表等）与套接字对话。我想通过指向不同的数据源来重用它们。

一个例子是图表和网格（带有底层数据）以及一个在图表和网格之间翻转的按钮。我如何将其作为一个组件，可以在同一个应用程序中多次使用，也可以共享给不同的应用程序。

Answer 1

是的，您可以使用Reactjs或Angularjs，如果部分的状态发生了多次变化，我建议使用Reactjs，在reactjs中每个组件都有一个状态，Reactjs知道何时重新渲染组件，因为它能够观察此数据何时发生变化。关于reactjs的脏检查很慢。

换句话说，Reactjs可以为您提供更好的性能，但请注意，Reactjs仅适用于UI，没有路由或其他类似的Angularjs。

我希望有所帮助，祝你好运

Answer 2

我已经通过JS对象，jQuery和Handlebars的简单组合完成了这个功能。如果你不想要它们，就不需要Angular等人（如果你这样做的话，没有任何问题）。我将我的组件定义为JS Objects：

/**
 * A data grid.
 */
function Grid(columns, $container) {
    this.columns = $.extend([], columns);
    ...
    this.render($container);
}

/**
 * Render the grid into a container.
 * @private
 */
Grid.prototype.render = function($container) {

使用Handlebars渲染视图：

<div class="grid">

    <header>
            <div class="label">
                {{#each columns}}<div data-id="{{id}}" data-index="{{@index}}" style="width:{{boxWidth}}px">{{name}}</div><nav></nav>{{/each}}
            </div>

模型是通过ajax调用获得的：

/**
 * Handle a grid filter change.
 * @private
 */
MasterCompanyList.prototype.onFilter = function(e, filter) {
    App.loading.start();
    App.ajax({
        url: 'ws/admin/mcl',
        data: filter.filter,
        context: this,
        success: function(json) {
            this.grid.setData(json);
            App.loading.done();
        }
    });
};

所有这一切都比Angular等更简单（我已经在商业上使用了Angular几年），但我发现这种KISS方法让我无需依赖更重的框架就能获得我所需的位置 - 如果我想操纵一些jQuery样式然后关闭。

Answer 3

Angular和React可以做到这一点，但React基于组件设计，因此它非常适合您尝试实现的目标。

用户控件等效于html5

3 个答案: