javascript – 使用React.js时的一般结构

看看 the Virtual DOM in React.js,做几个性能测试,我对这个图书馆很感兴趣.它似乎是Backbone的令人敬畏的模型,路由器和收集结构的完美附件.

然而,由于缺少质量教程和课程,我留下了几个问题,我希望有人能够回答：

HTML模板

是否完全消除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规定如下：

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

现在,当我想随时更新自定义视图x时,我该如何进行？ React应该是在Angular和Ember中找到的数据绑定的替代方法,而不做双向绑定,那么我该如何做到这一点呢？如何告诉CustomView保持关注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 ...");

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

我会喜欢一些指针,以帮助我在这里正确的方向.

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

解决方法

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

是的,赞成用JavaScript声明你的观点.它还允许虚拟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.

你不应该让你的观点变得复杂.从小组件制作大的组件,你不会有问题.如果你觉得它变得越来越复杂,你可以随时重新组织.

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 […]

你应该搜索“反应骨干”,你会发现一些博文和代码示例.他们经常一起使用.随时添加您在此发现的任何链接.

javascript – 使用React.js时的一般结构

解决方法

相关文章