这篇文章上次修改于 954 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

1.State（状态）

· state是组件对象最重要的属性，值是对象（可以包含多个数据）
· 组件被称为'状态机'，通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.props（properties）（组件标签属性）

· 每个组件对象都会有props属性
· 组件标签的所有属性都保存在props中

作用：

· 通过标签属性从组件外项组件内传递变化的数据
· 组件内部不要修改props数据

代码及操作：

· 内部读取某个属性值：
    this.props.propertyName
· 对props中的属性值进行类型限制和必要性限制
    Person(组件名).propTypes = {
        name(属性名)：React.PropTypes.string.isRequired
        age(属性名)：React.PropTypes.number.isRequired
    }
· 扩展属性：将对象的所有属性通过props传递
    <Person{...person} />
· 设置默认属性值
    Person.defaultProps = {
        name:'Mary'
    }
· 组件类的构造函数
    constructor(props){
        super(props)
        console.log(props) //可以查看所有属性的值
    }

3.refs（标签属性）

· 组件内的标签都可以定义ref属性来标识自己
    <input type="text" ref={input => this.msginput = input } />
    回调函数在组件初始化渲染完成或卸载时自动调用
· 在组件中可以通过上边声明的this.msginput来得到对应的真实DOM元素
· 作用是通过ref获取组件内容特定标签对象，进行读取其相关数据

事件处理：

· 通过onXX属性指定组件的事件处理函数（区分大小写）
    React使用的是自定义（合成）事件，而不是使用的原生DOM事件
    React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
· 通过event.target得到发生事件的DOM元素对象
    <input onFocus={this.handleClick}/>
      handleFocus(event) {
          event.target //返回 input 对象
      }

特别注意：

· 组件内置的方法中的this为组件对象
· 组件类中自定义的方法中this为null，绑定方法为：
    强制绑定this：通过函数对象的bind()
    利用箭头函数定义组件