查看the Virtual DOM in React.js通过做一些性能测试，我对这个库很感兴趣。它似乎是 Backbone 令人敬畏的模型、路由器和集合结构的完美补充。

但是，由于那里缺乏高质量的教程和类(class)，我还有几个问题希望这里有人能够回答:

HTML 模板

React 是否完全摒弃了 HTML 模板的概念？我说的是将您的 View 标记放在单独的 HTML 文件中(或在同一页面上的 <script type=text/template> 标记中)。你知道，就像你对 underscore.js Handlebars 等所做的那样......

Starter kit examples似乎都有 JSX 或 React.DOM功能就在你的 View 类中，这对我来说似乎有点困惑，而且随着你的 View 变得越来越复杂，我可以看到这有点失控。

这是一个呈现 2 个值及其总和的示例，使用带有嵌套表格的基本 Twitter Bootstrap 面板元素。

var CustomView = React.createClass({
    render: function() {
        var x = this.props.x;
        var y = this.props.y;

        return (
            <div className="panel panel-primary">
                <div className="panel-heading">
                    <h1 className="panel-title">Should I put all this markup somewhere else?</h1>
                </div>
                <div className="panel-body">
                    <table className="table">
                        <thead>
                            <tr>
                                <th>X</th>
                                <th>Y</th>
                                <th>Combined val</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{x}</td>
                                <td>{y}</td>
                                <td>{x + y}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
});

我不想知道是否可以将这些东西移动到一个单独的文件中，相反，我想了解在使用 React 时什么被认为是最佳实践。

更新和设置数据

Why React page陈述如下:

Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.

我不完全理解这是如何工作的。例如，以 <CustomView x="20" y="10"> 之前的 React 组件为例.最初我会这样渲染它:

var x = 20;
var y = 10;

React.renderComponent(
    <CustomView x={x} y={y} />,
    document.getElementById('view-container')
);

现在，当我想随时更新 CustomView 时 x变化，我该如何进行？ React 应该是您在 Angular 和 Ember 中找到的数据绑定(bind)的替代品，无需进行双向绑定(bind)，那么我该如何实现呢？我怎么知道CustomView关注x并在更改时自动重新渲染？

自然地，仅仅为 x 分配一个新值什么也做不了。

我知道有 setState方法，但我仍然必须手动调用它，对吗？因此，如果我使用 React View 和 Backbone 模型，代码可能如下所示:

// Data model: Backbone.js
var model = new Backbone.Model({text: "Please help! :)"});

// Create view class
var View = React.CreateClass({
    render: function() {
        return (
            <p>{this.props.text}</p>
        );
    }
});

// Instantiate new view
var view = React.renderComponent(
    <View text={model.get("text")}>,
    document.getElementById('view-container')
);

// Update view
model.on("change:text", function(model, newValue) {
    view.setState({
        text: newValue
    });
});

// Change data
model.set("text", "I do not understand this ...");

这似乎是一个非常奇怪的设置，而且我几乎可以肯定这不是您应该采用的方式。

我希望得到一些指导，以帮助我朝着正确的方向前进。

提前感谢您的任何反馈和帮助。

最佳答案

Does React completely do away with the notion of HTML templates?

是的，支持使用 JavaScript 声明您的 View 。它还允许虚拟 DOM 结构有效地工作。

The Starter kit examples all seem to have the JSX or React.DOM functions right inside your view classes, which seems a little messy to me, and I can see this getting a little out of hand, as your views grow in complexity.

您不应该让您的 View 变得越来越复杂。从小组件制造大组件，你不会有问题。如果您觉得它变得越来越复杂，您可以随时重新组织它。

I know there's the setState method, but I still manually have to call that, right? So if I was working with a React view and a Backbone model [...]

您应该搜索“react backbone”，您会找到一些博客文章和代码示例。它们经常一起使用。请随意添加您认为有帮助的任何链接。

关于javascript - 使用 React.js 时的一般结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24232007/