react 的三大属性

属性1：state

 1、认识：

               1）state是组件对象中最重要的属性，值是一个对象(可以包含多个数组，有点像vue中的data属性)

               2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示

2.操作state通常要经历三个状态

3、注意点：

              1.更新state状态定义的函数里面的this不是指向当前对象的，需要用bind强制绑定this为当前组件

                2.强制绑定this: this.handleClick= this.handleClick.bind(this)

 属性二：props

　　　1.理解：

　　　　　　1）每个组件对象都会有props（properties的简写）属性

　　　　　　2）每个组件标签中所有的属性都保存在props中

　　　2.作用：

　　　　　　1）通过标签属性从组件外向组件内传递变化的数据

　　　　　　2）组件内部不需要修改props数据

　　　3.props的操作

// 1）内部读取某个属性值
　　this .props.propertyName
// 2)对props中的属性值进行类型限制和必要性限制

方法一：新版本中已经被弃用
　　Person组件名：
　　Person.propTypes = {
    　　name: React.PropTypes.string.isRequired,
    　　age:React.PropTypes.number.isRequired
　　}

方法二：
　　需要用到prop - types.js文件
　　Person.propTypes = {
      name:PropTypes.string.isRequired
   }
// 3）扩展属性：对象的所有属性通过props传递
　　<Person {...person} /> //默认传递了所有属性
// 4)默认属性值 
　　Person.defaultProps = {
     　　name: "Mary"
　　}


// 5)组件类的构造函数，
　　constructor(props){
     　　super(props)
    　　 console.log(props) // 里面存放所有属性
　　}
属性三：ref与事件处理
　　1、理解：

              1）组件内的标签都可以定义ref属性来标识自己

               2）在组件中可以通过this.msgInput来得到真实的DOM元素

               3）作用：通过ref获取到组件特定的标签对象，进行读取相关数据

  2、事件处理

          1）通过onXxx属性指定组件的事件处理函数

          2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）

          3）通过event.target可以得到发生事件的DOM元素

 总结

• React中props和state都是存储数据的区别如下

　　1）state: 组件自身内部可变化的数据

　　2）props: 从组件外部向组件内部传递数据，组件内部只读取不修改

• 注意点：

　　1）组件内置的方法中的this为组件对象，z

　　2) 在组件类中自定义的处理函数方法的this默认为null 所以需要强制绑定