react组件

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 /> 表示一个组件，并且在使用该组件时你必须定义或引入它。