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

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()
    利用箭头函数定义组件