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

你可能感兴趣的:(React组件三大属性及组件通信)