Props、State在React中的不同

原文：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才能向下传递（向子组件传递）