React的demo详细讲解二

　　上一篇主要写得是React组件的创建语句和基本的语法。这篇同样借助上一篇中的demo说明数据的处理。包括props和state.

　　一.props
　　先来看一下什么场景下需要使用props传递数据。需要一段代码和说明。

var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});

　　在上面的代码中。组件CommentList的子节点Comment和评论文字如：”this is one comment“.组件CommentList的属性有className和author.这时Commentlist 需要将author属性值和它的子节点“this is one comment”的信息传递给它的子节点Comment。

var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});

　　CommentList的子节点Comment.需要父组件传递属性值author和子节点评论文字过来。在 JSX 中,通过将 JavaScript 表达式放在大括号中（作为属性或者子节点）,你可以把文本或者 React 组件放置到组件树中。我们以 this.props 的 keys 访问传递给组件的命名属性，比如this.props.author/this.props.className，以 this.props.children 访问任何嵌套的元素。

 

　　二.state

　　props是不可变的：它们从父级传来并被父级“拥有”。为了实现交互，我们给组件引进了可变的 state。this.state 是组件私有的，可以通过调用 this.setState() 改变它。每当state更新，组件就重新渲染自己。

　　总觉得state这个词很难理解，什么叫状态呢？看过官网的理解，我把它理解为局部变量，体现的是某一种情况下的值的状态，进而表现出渲染出页面的状态。而props就想java中的类的属性，是全局的，可以传递的。

var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});

　　getInitialState() 在生命周期里只执行一次，并设置组件的初始状态。当组件第一次创建时，想从服务器获取一些 JSON 并且更新状态以反映最新的数据。我们将用 jQuery 来发送一个异步请求到服务器以获取需要的数据。

var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});

　　这里，componentDidMount 是一个当组件被渲染时被Ｒeact自动调用的方法。动态更新的关键是对 this.setState() 的调用。用新的从服务器来的替换掉旧的评论组，然后UI自动更新自己。因为这种反应性，仅是一个微小的变化就添加了实时更新。

　　三.两者的对比

　　props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。而state代表的是一个组件内部自身的状态（可以是父组件、子孙组件）。改变一个组件自身状态，从语义上来说，就是这个组件内部已经发生变化，有可能需要对此组件以及组件所包含的子孙组件进行重渲染。而props是父组件传递的参数，可以被用于显示内容，或者用于此组件自身状态的设置（部分props可以用来设置组件的state），不仅仅是组件内部state改变才会导致重渲染，父组件传递的props发生变化，也会执行。既然两者的变化都有可能导致组件重渲染，所以只有理解pros与state的意义，才能很好地决定到底什么时候用props或state。

　　从理解JAVA的角度来想，类的概念主要包括两个要素，属性和方法。在真正使用类的时候首先就是要实例化。React也一样需要实例化，不过它叫做createElement.React也有属性props.同理也会有方法，方法是下一篇博客重点介绍的知识。在方法的实现里会用到具体的变量，我把它理解为React的state。