blocks|key|2743808|text|有几个基本原则需要记住，它们可以帮助你构建一个好的React应用程序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2743809|您的UI应该是data的一个函数|2743810|在许多"jQuery汤“风格的应用程序中，应用程序的业务逻辑、应用程序的数据和UI交互代码都混合在一起。这使得这类应用程序很难调试，尤其是难以扩展。与许多现代客户端应用程序框架一样，React强调UI只是数据的一种表示形式。如果您希望更改UI，则应该更改一段数据，并允许框架使用任何绑定系统来为您更新UI。|2743811|在React中，每个组件(理想情况下)都是两段数据的函数-传递给组件实例的属性和组件内部管理的状态。给定相同的属性(或"props")和状态，组件应该以相同的方式呈现。|2743812|这可能是一个抽象的想法，没有具体的例子，所以在我们继续下一步的时候请记住这一点。|2743813|请勿接触DOM|offset|length|style|BOLD|2743814|与其他数据绑定框架相比，在React中，如果可能的话，您应该尽量不直接操作DOM。React的许多性能和复杂性特征之所以成为可能，是因为React在内部使用了一个带有差分算法的虚拟DOM来操作真实的DOM。每当您构建一个组件并执行自己的DOM操作时，您都应该问问自己，是否可以使用React的虚拟DOM特性更地道地构建相同的特性。|2743815|当然，有时您需要访问DOM，或者您可能希望合并一些jQuery插件而不在React中重新构建它。在这种情况下，React为您提供了良好的component+lifecycle+hooks，您可以使用它来确保React的性能不会受到太大影响(或者，在某些情况下，为了防止组件完全崩溃)。|2743816|不操纵DOM与上面的"UI作为数据的函数“密切相关。|2743817|颠倒数据流|2743818|在大型React应用程序中，可能很难跟踪哪个子组件正在管理某个应用程序数据。出于这个原因，React团队建议将数据操作逻辑放在一个中心位置。要做到这一点，最直接的方法是将回调传递给子组件；Facebook还开发了一个名为Flux的体系结构，该体系结构具有its+own+website。|2743819|创建可组合组件|2743820|很多时候，编写一个管理多个状态或多个UI逻辑的大型组件是很有诱惑力的。在可能的情况下(并且在合理的范围内)，您应该考虑将较大的组件拆分成对单个数据或UI逻辑进行操作的较小组件。这使得扩展和移动应用程序的各个部分变得更加容易。|2743821|注意可变数据|2743822|由于组件状态只能通过从组件内部调用this.setState来更新，因此提防可变数据是很有帮助的。当有多个功能(或组件！)时更是如此可能会在同一时间内更新可变对象；React可能会尝试批量处理状态更改，而您可能会丢失更新！正如Eliseu+Monar的评论中所提到的，在对可变对象进行变异之前，请考虑克隆它们。React有immutability+helpers可以提供帮助。|CODE|2743823|另一种选择是完全放弃直接保持可变数据结构的状态；上面提到的Flux模式是对这种想法的一种有趣的采用。|2743824|2743825|React网站上有一篇很棒的文章，名为Thinking+in+React，它介绍了如何将一个想法或模型转化为React应用程序，我强烈建议您阅读这篇文章。作为一个具体的例子，让我们看一下您提供的代码。实际上，您只需要管理一段数据:存在于container元素中的内容列表。对UI的所有更改都可以通过对该数据的添加、删除和更改来表示。|2743826|通过应用上面的原则，您的最终应用程序可能如下所示：|2743827|/**+@jsx+React.DOM+*/

var+Application+=+React.createClass({
++getInitialState:+function()+{
++++return+{
++++++content:+[]
++++};
++},

++render:+function()+{
++++return+(
++++++<div+className="container">
++++++++<span+className="header">jQuery+to+React.js+Header
++++++++<button+className="add_button"
++++++++++++++++onClick={this.addContent}>Add+Element</button>
++++++++<button+className="add_button"
++++++++++++++++onClick={this.timedAddContent}>Add+Element+in+3+Seconds</button>
++++++++{this.state.content.map(function(content)+{
++++++++++return+<ContentItem+content={content}+removeItem={this.removeItem}+/>;
++++++++}.bind(this))}
++++++</div>
++++);
++},

++addContent:+function()+{
++++var+newItem+=+{className:+"added_content",+text:+"Click+to+close"},
++++++++content+=+this.state.content,
++++++++newContent+=+React.addons.update(content,+{$push:+[newItem]});
++++this.setState({content:+newContent});
++},

++timedAddContent:+function()+{
++++setTimeout(function()+{
++++++var+newItem+=+{className:+"timed_added_content",+text:+"Click+to+close"},
++++++++++content+=+this.state.content,
++++++++++newContent+=+React.addons.update(content,+{$push:+[newItem]});
++++++this.setState({content:+newContent});
++++}.bind(this),+3000);
++},

++removeItem:+function(item)+{
++++var+content+=+this.state.content,
++++++++index+=+content.indexOf(item);
++++if+(index+>+-1)+{
++++++var+newContent+=+React.addons.update(content,+{$splice:+[[index,+1]]});
++++++this.setState({content:+newContent});
++++}
++}
});

var+ContentItem+=+React.createClass({
++propTypes:+{
++++content:+React.PropTypes.object.isRequired,
++++removeItem:+React.PropTypes.func.isRequired
++},

++render:+function()+{
++++return+<span+className={this.props.content.className}
+++++++++++++++++onClick={this.onRemove}>{this.props.content.text};
++},

++onRemove:+function()+{
++++this.props.removeItem(this.props.content);
++}
});

React.renderComponent(<Application+/>,+document.body);|code-block|syntax|javascript|2743828|您可以在this+JSFiddle中查看实际运行的代码：http://jsfiddle.net/BinaryMuse/D59yP/|2743829|该应用程序由两个组件组成:一个名为Application的顶级组件(在其状态下)管理一个名为content的数组，以及一个名为ContentItem的组件，它表示该数组中单个项的UI和行为。Application的render方法为内容数组中的每一项返回一个ContentItem元素。|2743830|需要注意的是，管理content数组中的值的所有逻辑都是在Application组件中处理的；ContentItem组件被传递了一个对Application的removeItem方法的引用，当单击该方法时，ContentItem将委托该方法。这将所有用于操作状态的逻辑都保留在顶级组件中。|2743831|entityMap|0|LINK|mutability|MUTABLE|url|http://facebook.github.io/react/docs/component-specs.html|1|https://facebook.github.io/flux/docs/overview.html|2|http://facebook.github.io/react/docs/update.html|3|http://facebook.github.io/react/docs/thinking-in-react.html|4|http://jsfiddle.net/BinaryMuse/D59yP/|5^0|0|0|0|0|0|0|7|0|0|1W|P|0|0|0|0|5|0|3J|F|1|0|0|7|0|0|0|6|0|H|D|4H|K|2|0|0|0|3A|9|J|H|3|0|0|0|4|D|4|S|11|5|0|H|B|1A|7|1R|B|2N|B|2Z|6|3L|B|0|9|7|T|B|1B|B|1V|B|27|A|2V|B|0^^$0|@$1|2|3|4|5|6|7|27|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|28|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|29|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|2A|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|2B|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|2C|8|@$L|2D|M|2E|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|2F|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|2G|8|@]|9|@$L|2H|M|2I|1|2J]]|A|$]]|$1|T|3|U|5|6|7|2K|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|2L|8|@$L|2M|M|2N|N|O]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2O|8|@]|9|@$L|2P|M|2Q|1|2R]]|A|$]]|$1|Z|3|10|5|6|7|2S|8|@$L|2T|M|2U|N|O]]|9|@]|A|$]]|$1|11|3|12|5|6|7|2V|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2W|8|@$L|2X|M|2Y|N|O]]|9|@]|A|$]]|$1|15|3|16|5|6|7|2Z|8|@$L|30|M|31|N|17]]|9|@$L|32|M|33|1|34]]|A|$]]|$1|18|3|19|5|6|7|35|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|36|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|37|8|@$L|38|M|39|N|17]]|9|@$L|3A|M|3B|1|3C]]|A|$]]|$1|1D|3|1E|5|6|7|3D|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|1H|7|3E|8|@]|9|@]|A|$1I|1J]]|$1|1K|3|1L|5|6|7|3F|8|@]|9|@$L|3G|M|3H|1|3I]|$L|3J|M|3K|1|3L]]|A|$]]|$1|1M|3|1N|5|6|7|3M|8|@$L|3N|M|3O|N|17]|$L|3P|M|3Q|N|17]|$L|3R|M|3S|N|17]|$L|3T|M|3U|N|17]|$L|3V|M|3W|N|17]|$L|3X|M|3Y|N|17]]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|3Z|8|@$L|40|M|41|N|17]|$L|42|M|43|N|17]|$L|44|M|45|N|17]|$L|46|M|47|N|17]|$L|48|M|49|N|17]|$L|4A|M|4B|N|17]]|9|@]|A|$]]|$1|1Q|3|-4|5|6|7|4C|8|@]|9|@]|A|$]]]|1R|$1S|$5|1T|1U|1V|A|$1W|1X]]|1Y|$5|1T|1U|1V|A|$1W|1Z]]|20|$5|1T|1U|1V|A|$1W|21]]|22|$5|1T|1U|1V|A|$1W|23]]|24|$5|1T|1U|1V|A|$1W|25]]|26|$5|1T|1U|1V|A|$1W|25]]]]

There are a few basic tenets to keep in mind that may help you build a good React application:

Your UI should be a function of the data

In many "jQuery soup" style applications, the business logic for the application, the app's data, and the UI interaction code are all intermingled. This makes these sorts of applications difficult to debug and, especially, difficult to grow. React, like many modern client-side application frameworks, enforce the idea that the UI is just a representation of your data. If you want your UI to change, you should change a piece of data and allow whatever binding system the framework uses to update the UI for you.

In React, each component is (ideally) a function of two pieces of data–the properties passed to the component instance, and the state that the component manages internally. Given the same properties (or "props") and state, the component should render in the same way.

This can be a bit of an abstract idea without concrete examples, so keep it in mind as we move on for now.

Don't touch the DOM

In React, even more so than other data-bound frameworks, you should try not to manipulate the DOM directly if at all possible. A lot of React's performance and complexity characteristics are only possible because React uses a virtual DOM with diffing algorithms internally to operate on the real DOM. Any time you build a component that reaches out and does its own DOM manipulation, you should ask yourself if you could build the same feature more idiomatically with React's virtual DOM features.

Of course, sometimes you'll need to access the DOM, or you'll want to incorporate some jQuery plugin without rebuilding it in React. For times like these, React gives you good <a href="http://facebook.github.io/react/docs/component-specs.html">component lifecycle hooks</a> that you can use to ensure that React's performance doesn't suffer too much (or, in some cases, to keep your component from plain breaking).

Not manipulating the DOM goes hand-in-hand with "UI as a function of the data," above.

Invert the data flow

In a large React application, it can be difficult to keep track of which sub-component is managing a certain piece of application data. For this reason, the React team recommends keeping data manipulation logic in a central location. The most straightforward way to do this is to pass callbacks into child components; there's also an architecture developed at Facebook called Flux which has <a href="https://facebook.github.io/flux/docs/overview.html">its own website</a>.

Create composable components

A lot of times, it can be tempting to write a large component that manages several pieces of state or several pieces of UI logic. Where possible (and within reason), you should consider breaking larger components into smaller ones that operate on a single piece of data or UI logic. This makes it much easier to extend and move around pieces of your application.

Beware mutable data

Since component state should only be updated via calls to <code>this.setState</code> from within the component, it's helpful to be wary of mutable data. This is doubly true when multiple functions (or components!) might update the mutable object in the same tick; React might try to batch state changes, and you could lose updates! As mentioned in the comments by Eliseu Monar, consider cloning mutable objects before mutating them. React has <a href="http://facebook.github.io/react/docs/update.html">immutability helpers</a> that can assist.

Another option is to forgo keeping mutable data structures directly in state at all; the Flux pattern, mentioned above, is an interesting take on this idea.

<hr>

There's a great article on the React site called <a href="http://facebook.github.io/react/docs/thinking-in-react.html">Thinking in React</a> which goes over how you might take an idea or a mockup and turn it into a React application, and I strongly encourage going over it. As a concrete example, let's take a look at the code you provided. You essentially have one piece of data to manage: a list of content that exists inside the <code>container</code> element. All the changes to your UI can be represented by additions, removals, and changes to that data.

By applying the tenets above, your final application might look something like this:

<pre><code>/** @jsx React.DOM */

var Application = React.createClass({
 getInitialState: function() {
 return {
 content: []
 };
 },

 render: function() {
 return (
 &lt;div className="container"&gt;
 &lt;span className="header"&gt;jQuery to React.js Header&lt;/span&gt;
 &lt;button className="add_button"
 onClick={this.addContent}&gt;Add Element&lt;/button&gt;
 &lt;button className="add_button"
 onClick={this.timedAddContent}&gt;Add Element in 3 Seconds&lt;/button&gt;
 {this.state.content.map(function(content) {
 return &lt;ContentItem content={content} removeItem={this.removeItem} /&gt;;
 }.bind(this))}
 &lt;/div&gt;
 );
 },

 addContent: function() {
 var newItem = {className: "added_content", text: "Click to close"},
 content = this.state.content,
 newContent = React.addons.update(content, {$push: [newItem]});
 this.setState({content: newContent});
 },

 timedAddContent: function() {
 setTimeout(function() {
 var newItem = {className: "timed_added_content", text: "Click to close"},
 content = this.state.content,
 newContent = React.addons.update(content, {$push: [newItem]});
 this.setState({content: newContent});
 }.bind(this), 3000);
 },

 removeItem: function(item) {
 var content = this.state.content,
 index = content.indexOf(item);
 if (index &gt; -1) {
 var newContent = React.addons.update(content, {$splice: [[index, 1]]});
 this.setState({content: newContent});
 }
 }
});

var ContentItem = React.createClass({
 propTypes: {
 content: React.PropTypes.object.isRequired,
 removeItem: React.PropTypes.func.isRequired
 },

 render: function() {
 return &lt;span className={this.props.content.className}
 onClick={this.onRemove}&gt;{this.props.content.text}&lt;/span&gt;;
 },

 onRemove: function() {
 this.props.removeItem(this.props.content);
 }
});

React.renderComponent(&lt;Application /&gt;, document.body);
</code></pre>

You can see the code in action in <a href="http://jsfiddle.net/BinaryMuse/D59yP/">this JSFiddle</a>: <a href="http://jsfiddle.net/BinaryMuse/D59yP/">http://jsfiddle.net/BinaryMuse/D59yP/</a>

The application is made of two components: a top-level component called <code>Application</code>, which manages (in its state) an array called <code>content</code>, and a component called <code>ContentItem</code>, which represents the UI and behavior of a single item from that array. <code>Application</code>'s <code>render</code> method returns a <code>ContentItem</code> element for each item in the content array.

One thing to notice is that all of the logic for managing the values inside the <code>content</code> array are handled in the <code>Application</code> component; the <code>ContentItem</code> components are passed a reference to <code>Application</code>'s <code>removeItem</code> method, which the <code>ContentItem</code> delegates to when clicked. This keeps all the logic for manipulating state inside the top-level component.

I have been reading up on React for a few days nows. I can understand most of what I'm looking at, but I'm not entirely confident in my ability to write it. I have been working on a small web app that does all of its html generation through jQuery and appending elements to each other. I'd like to try and rebuild this with React because I believe that it would be faster. This <a href="http://jsfiddle.net/easilyBaffled/7X7Xu/" rel="noreferrer">JSFiddle</a> is a small example of the sort of thing I am working on. How would you write it with React?

JS:

<pre><code>function remove() {
 this.remove();
}

function timed_append_new_element() {
 setTimeout(function () {
 var added_content = $("&lt;span /&gt;", {
 class: "added_content",
 text: "Click to close",
 click: remove
 });
 container.append(added_content);
 }, 3000);
}

function append_new_element() {
 var added_content = $("&lt;span /&gt;", {
 class: "timed_added_content",
 text: "Click to close",
 click: remove
 });
 container.append(added_content);
}


var container = $("&lt;div /&gt;", {
 class: "container"
});
var header = $("&lt;span /&gt;", {
 class: "header",
 text: "jQuery to React.js Header"
});
var add_button = $("&lt;button /&gt;", {
 class: "add_button",
 text: "Add Element",
 click: append_new_element
});
var timed_add_button = $("&lt;button /&gt;", {
 class: "add_button",
 text: "Add Element in 3 seconds",
 click: timed_append_new_element
});
container.append(header);
container.append(add_button);
container.append(timed_add_button);
$("body").append(container);
</code></pre>

How to go from jQuery to React.js?

我已经读了几天关于React的文章。我可以理解我正在看的大部分内容，但我对自己的写作能力并不是完全有信心。我一直在开发一个小的web应用程序，它通过jQuery和互相添加元素来生成所有的html。我想尝试用React重新构建它，因为我相信它会更快。这个是我正在做的这类事情的一个小例子。你会怎么用React来写呢？JS:...

问如何从jQuery转到React.js？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从jQuery转到React.js？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从jQuery转到React.js？
EN