Question

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

然而，由于缺乏高质量的教程和课程，我留下了一些问题，希望有人能够回答：

HTML模板

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

Starter kit examples所有人似乎都在你的视图类中有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时最佳做法是什么。

更新和设置数据

Why React page声明如下：

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

我不完全了解这是如何运作的。例如，从<CustomView x="20" y="10">之前获取React组件。最初我会这样渲染它：

var x = 20;
var y = 10;

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

现在，当我想在x更改时更新CustomView时，我该如何处理？ React应该是你在Angular和Ember中找到的数据绑定的替代品，而不进行双向绑定，那么我该如何实现呢？如何告诉CustomView密切关注x并在其发生变化时自动重新呈现？

当然，只需为x分配一个新值就没有了。

我知道有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应该只有＆＃39;从组件本身内部使用 - 出于所有意图和目的，将其视为受保护的方法。相反，存在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();

Answer 3

感谢回复人员，

所以，我是否正确假设如果我希望视图观察数据模型，我最终得到的实际上非常接近Backbone视图代码，您可以在intialize方法中连接事件侦听器？这是一个有效的简单示例：

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

正如我所说，这确实有效。只要模型的文本属性发生更改，视图就会重新呈现。这会被考虑好吗＆＃34;好＆＃34;反应代码，还是应该以不同方式挂钩？

使用React.js时的一般结构

HTML模板

更新和设置数据

3 个答案: