这篇文章上次修改于 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()
利用箭头函数定义组件
没有评论