state
初始化状态
constructor(props){
super(props);
this.state={
stateProp: value1,
stateProp2: value2
}
}
读取某个状态值
this.state.statePropertyName;
更新状态 --> 组件界面更新
this.setState({
stateProp1: value1,
stateProp2: value2
})
注意：在 JSX 的新添加的方法中，内部的 this 默认不是组件对象，而是 undefined。应该使用 bind 方法解决该问题
props
内部读取某个属性值
this.props.propertyName
对 props 中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
扩展属性：将对象的所有属性通过 props 传递
<Person{...person}>
默认属性值
Person.defaultProps = {
name: 'Mary'
}
ref
<input type="text" ref={(input) => {this.input = input}}/>
组件交互
父子组件
父组件传递给子组件
将要改变的数据传给子组件，子组件调用函数改变state
子组件传递给父组件
子组件不能直接改变父组件的数据！！！
解决方案：父组件将要改变数据的函数传给子组件，子组件调用这个函数，进而改变父组件的数据
组件通信
方式一：通过 props 传递
共同的数据放在父组件上，特有的数据放在自己组件内部(state)
通过 props 可以传递一般数据和函数数据
一般数据 -> 父组件传递数据给子组件 -> 子组件读取数据
函数数据 -> 子组件传递数据给父组件 -> 子组件调用函数
方式二：使用消息订阅(subscribe)-发布(publish)机制
工具库：PubSubJS
下载：
npm install pubsub-js --save
