Javascript 使用React.js时的常规结构

通过查看并进行一些性能测试，我对这个库非常感兴趣。它似乎是主干网令人敬畏的模型、路由器和收集结构的完美补充

然而，由于缺乏高质量的教程和课程，我还有几个问题希望在座的人能够回答：

HTML模板 React是否完全抛弃了HTML模板的概念？我说的是将视图标记放在一个单独的HTML文件中（或者放在同一页的

标记中）。你知道，就像你对underline.js Handlebar等做的那样

all似乎在视图类中有JSX或

React.DOM

函数，这对我来说有点混乱，我可以看到，随着视图的复杂性增加，这有点失控

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

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

这似乎是一个非常奇怪的设置，我几乎可以肯定这不可能是你应该这样做

我想要一些指针来帮助我朝着正确的方向前进

---

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

您走上了正确的道路，但是有两件事需要解决。一个是bug，另一个是首选模式

错误：在视图中，您使用的是

this.props.text

（很好！），但在模型侦听器中使用的是

setState

。这将设置未使用的

This.state.text

值，因此它将不起作用<代码>设置状态应“仅”从组件本身内部使用-出于所有目的，将其视为受保护的方法。相反，存在

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();

//数据模型：Backbone.js
var model=new Backbone.model（{text:“请帮助！”：）“}）；
//创建视图类
var View=React.CreateClass({
render:function（）{
返回(
{this.props.text}

);
}
});
函数重新渲染器（）{
React.renderComponent(
,
document.getElementById（'view-container'）
);
}
//更新视图
model.on（“更改：文本”，函数（model，newValue）{
重新加载（）；
});
重新加载（）；

React是否完全抛弃了HTML模板的概念

是的，赞成用JavaScript声明视图。它还允许虚拟DOM结构高效地工作

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

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

我知道有setState方法，但我仍然需要手动调用它，对吗？因此，如果我使用的是React视图和主干模型[…]

---

你应该搜索“react主干”，你会发现一些博客文章和代码示例。它们经常一起使用。欢迎在此处添加任何您认为有用的链接。

谢谢您的回复

那么，如果我想让视图观察数据模型，那么我最终得到的实际上非常接近主干视图代码，在主干视图代码中，您在

initialize

方法中连接事件侦听器，这一假设是否正确？下面是一个有效的快速示例：

var model = new Backbone.Model({
    text: "Hey there :)"
});

var TextBox = React.createClass({
    getInitialState: function() {
        return this.props.model.toJSON();
    },
    componentWillMount: function() {
        this.props.model.on("change:text", function(model, newText) {
            this.setState({
                text: newText
            });
        }, this);
    },
    render: function() {
        return (
            <p>{this.state.text}</p>
        );
    }
});

React.renderComponent(
    <TextBox model={model} />,
    document.getElementById('view-holder')
);

var model=新主干网。model({
文字：“嘿，那里：）”
});
var TextBox=React.createClass({
getInitialState:函数（）{
返回这个.props.model.toJSON（）；
},
componentWillMount:function（）{
this.props.model.on（“更改：文本”，函数（model，newText）{
这是我的国家({
文本：新文本
});
}，这个）；
},
render:function（）{
返回(
{this.state.text}

);
}
});
React.renderComponent(
,
document.getElementById（'视图持有者'）
);

---

正如我所说，这确实起到了预期的作用。只要模型的文本属性发生更改，视图就会重新渲染。这会被认为是“好的”React代码，还是我应该以不同的方式连接它？

Javascript也比HTML模板更具可组合性。您可以使用任何用于构造javascript的工具/库来构造组件。我经常使用下划线JS中的函数从数据数组中构建组件数组。谢谢FakeRainBrigand！这确实让事情变得清晰了一点，尽管对我来说放弃HTML模板有点困难，但我想这只是我必须习惯的事情……：）我自己也没用过，但可能值得一看。它似乎是包含在React组件中的引导组件，因此您可以使用

而不是
CustomView
中的大量面板html。。。表…

取而代之。我会采纳Shane的建议，在主干视图代码中调用React.renderComponent。这里的数据不是组件的状态，而是主干模型的状态。如果需要更改模型，可以将onChange道具传递给组件，这样可以将所有模型代码保留在主干视图中。如果你保持组件的纯粹性，它会使测试和重用组件变得更容易。@FakeRainBrigand哦，这样你就不会真正替换主干视图了，你会在其中构建react组件吗？这真是一个相互询问的方法！这样，我仍然可以使用

this.listono

而不是旧的来观察事件

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

var model = new Backbone.Model({
    text: "Hey there :)"
});

var TextBox = React.createClass({
    getInitialState: function() {
        return this.props.model.toJSON();
    },
    componentWillMount: function() {
        this.props.model.on("change:text", function(model, newText) {
            this.setState({
                text: newText
            });
        }, this);
    },
    render: function() {
        return (
            <p>{this.state.text}</p>
        );
    }
});

React.renderComponent(
    <TextBox model={model} />,
    document.getElementById('view-holder')
);