React组件三大属性及组件通信

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.defaultProps = {
        name: 'Mary'
    }

ref

     {this.input = input}}/>

组件交互

父子组件

父组件传递给子组件

将要改变的数据传给子组件，子组件调用函数改变state

子组件传递给父组件

子组件不能直接改变父组件的数据！！！

解决方案：父组件将要改变数据的函数传给子组件，子组件调用这个函数，进而改变父组件的数据

组件通信

方式一：通过 props 传递

1. 共同的数据放在父组件上，特有的数据放在自己组件内部(state)

2. 通过 props 可以传递一般数据和函数数据

3. 一般数据 -> 父组件传递数据给子组件 -> 子组件读取数据

4. 函数数据 -> 子组件传递数据给父组件 -> 子组件调用函数

方式二：使用消息订阅(subscribe)-发布(publish)机制

1. 工具库：PubSubJS

2. 下载：npm install pubsub-js --save