原文:https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react
Props和State是有关联的,一个组件的state经常会变成它的子组件的props。 Props一般是作为有父组件的render方法的参数传递给子组件的React.createElement()方法的。如果你使用JSX,比较熟悉的tag属性是
<MyChild name={this.state.childsName} />
父组件的状态“childsName”变成了子组件的this.props.name。从子组件来看,name属性是不可变的。如果我们需要更改这个值,父组件应该改变它的内部状态值:
this.setState({childsName: 'New name'});
React将会将这个值传播给子组件,那么另外一个问题接踵而至如果需要更改子组件的prop值怎么办,这个需要由子组件事件以及负组件的回掉函数。子组件抛出一个事件声明例如onNameChanged. 父组件通过传递callback handler来订阅这个事件。
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
子组件通过调用this.props.onNameChanged('New name'),父组件将使用事件handler来更新状态
handleName:function(newName){
this.setState({childsName:newName});
}
2. 所以Props是作为父组件与子组件沟通的桥梁的,而State是为了储存当前页面需要的数据,使用Props将数据以及事件句柄向下传递给子组件。
Props
(1). 是不可变的这使得React快速检查引用
(2). 用于向下传递数据从(view-controller)
State
(1). 应该在你的view-controller管理它
(2). 是可变的
(3). 性能不好
(4). 子组件不能访问必须通过pros才能向下传递(向子组件传递)