ReactJS-2-props vs state

props理解:

大多数组件都可以在创建的时候被不同的参数定制化，这些不同的参数就叫做props.
props的流向是父组件到子组件。

子组件Comment，是一条评论组件，父组件CommentList，展示了所有的评论内容，父组件在使用子组件的时候也就是<Comment />时候，不仅仅想使用一个普通的Comment组件，想要使用一个定制化的Comment组件<Comment text=‘aaa‘ />，text定制的是Comment的内容,，这里 text 是一个props,  父组件的想法很好，但是没有子组件的配合无法实现。那么在渲染组件的时候，子组件如何实现这个定制呢？子组件需要通过this.props.text获取父组件对自己的定制化，通常情况下，并不是所有的子组件都能获得父组件的青睐，防止子组件未获取父组件props，那么给子组件Comment组件加上static defaultProps = {text:‘我是默认的‘} 

1 ?//子组件Comment2 class Comment extends Component {3 ??static defaultProps = {text:‘我是默认的‘}4 ??render () {5 ?????return (6 ???????<div>{this.props.text}</div>7 ?????)8 ???}9 }

 1 ?//父组件CommentList 2 class CommentList extends Component { 3 ??render () { 4 ?????return ( 5 ???????<Comment text=‘aaa‘ /> 6 ???????<Comment text=‘bbb‘ /> 7 ???????<Comment ?/> 8 ?????) 9 ???}10 }

State理解：

state主要是组件自己用来控制自己的状态的，通过setState控制，比如一个开关有两种状态，on off，组件一开始的状态是off用代码表示为this.state={status:‘off‘}，现在希望点击一下就改变(setState)自己的状态，点击组件属于组件自己的行为，点击后开关变化是自己状态变化，整体是自己的行为改变了自己的状态,这就是state的作用。

Props vs States:

Props:

1. 不可变的
2. 用于从您的视图控制器（您的顶级组件）向下传递数据
3. 更好的性能，使用它将数据传递给子组件

State:

1. 应该在您的视图控制器（您的顶级组件）中进行管理，
2. 易变的
3. 糟糕的表现
4. 不要从子组件访问它，而是用props传递它

Props和State合作：

Props和State合作可以将父组件的state传给子组件

ReactJS-2-props vs state

原文地址：http://www.cnblogs.com/coding-swallow/p/props-vs-state.html