使用React.js时的一般结构

你走的是正确的道路,但有两件事需要解决.一个是错误,另一个是首选模式.

错误:在视图中,您正在使用this.props.text(好!),但您正在使用setState模型侦听器.这将设置this.state.text您未使用的值,因此无法使用. setState应该"仅"从组件内部使用 - 出于所有意图和目的,将其视为受保护的方法.相反,有一个setProps函数,它只能从组件外部使用.

首选模式:setProps很快就会被弃用,因为它会导致许多微妙的问题.更好的做法是每次都重新渲染整个组件.您的案例中的正确代码是:

// 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>
        );
    }
});

function rerender() {
  React.renderComponent(
    <View text={model.get("text")}>,
    document.getElementById('view-container')
  );
}

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

rerender();

React是否完全废除了HTML模板的概念？

是的,赞成使用JavaScript声明您的观点.它还允许Virtual DOM结构高效工作.

Starter工具包示例似乎都在视图类中包含JSX或React.DOM函数,这对我来说似乎有些混乱,而且随着视图的复杂性增加,我可以看到这有点失控.

您不应该允许您的视图增加复杂性.使用小型组件制作大型组件,您就不会遇到问题.如果您觉得它变得越来越复杂,您可以随时重新组织它.

我知道有setState方法,但我仍然需要手动调用它,对吧？所以,如果我正在使用React视图和Backbone模型[...]

你应该搜索"react backbone",你会发现一些博客文章和代码示例.它们经常一起使用.您可以在此处添加任何有用的链接.