react组件
组件可以将UI切分成一些的独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。
组件定义
1.无状态函数式定义
function Welcome(props){
return ;}
这种方法无state状态,不能访问组件中的this对象,无法访问生命周期。
2.ES6 class定义方法
class Welcome extends React.Component{
render(){
return <h1>Hello,{this.props.name}</h1>;
}}
注意:1.
React.Component创建的组件,其成员函数不会自动绑定this,需要开发者手动绑定,否则this不能获取当前组件实例对象。
2.在创建组件时,有关组件props的属性类型及组件默认的属性在创建组件时配置这两个对应信息时,他们是作为
组件类的属性,不是组件实例的属性,也就是所谓的
类的静态属性来配置的。
class TodoItem extends React.Component {
static propTypes = {//类的静态属性
name: React.PropTypes.string
};
static defaultProps = {//类的静态属性
name: ''
};
...
}
3.
React.Component创建的组件,其状态state是在
constructor
中像初始化组件属性一样声明的。并且只能在构造函数中声明。
4.组件名称必须以大写字母开头。
例如,<div />
表示一个DOM标签,但 <Welcome />
表示一个组件,并且在使用该组件时你必须定义或引入它。