属性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传递　　
     //默认传递了所有属性// 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 所以需要强制绑定