使用React.js时的一般结构

Question

查看React.js中的Virtual DOM并进行一些性能测试,我对这个库非常感兴趣.它似乎是Backbone令人敬畏的模型,路由器和集合结构的完美附件.

但是,由于缺乏高质量的教程和课程,我留下了一些问题,希望有人能够回答:

HTML模板

React是否完全废除了HTML模板的概念？我在谈论将视图标记放在单独的HTML文件中(或者在<script type=text/template>标记的同一页面上).你知道,就像你使用underscore.js Handlebars等...

该入门套件的例子似乎都拥有JSX或React.DOM右视图类中的功能,这似乎有点乱给我,我可以看到这个开始有点失控,因为你的观点越来越复杂.

这是一个使用带有嵌套表的基本Twitter Bootstrap面板元素呈现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>
        );
    }
});

我不想知道是否可以将这些东西移到一个单独的文件中,而是,我试图理解在使用React时最好的做法.

更新和设置数据

该为什么阵营页面状态下:

只需表达您的应用在任何给定时间点应该如何查看,并且当您的基础数据发生变化时,React将自动管理所有UI更新.

我不完全理解这是如何工作的.例如,从之前获取React组件<CustomView x="20" y="10">.最初我会像这样呈现它:

var x = 20;
var y = 10;

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

现在,当我想要随时更新CustomView时x,我该如何处理？React应该是你在Angular和Ember中找到的数据绑定的替代品,而不进行双向绑定,那么我该如何实现呢？如何CustomView监视x并在其发生变化时自动重新渲染？

当然,只是分配xa新值什么也不做.

我知道有setState方法,但我仍然需要手动调用,对吧？因此,如果我使用React视图和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 ...");

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

我想要一些指示,以帮助我在这里朝着正确的方向前进.

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

Answer 1

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

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

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

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

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

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

Answer 2

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

错误:在视图中,您正在使用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();