react组件

狭义上的组件与广义上的组件

狭义上的组件又称为UI组件，组件主要围绕在交互动作上的抽象

广义上的组件即带有业务含义和数据的UI组件组合。这类组件不仅有交互动作，更重要的是有数据与界面的交互

以常用的tabs组件为例 分别用html（结构），css（样式），js（交互行为）

 

 

1.react组件的构建

react基本由三个部分组成，属性（props），状态（state）以及生命周期方法

setState --> state,props --> 生命周期  --> Render

 React组件可以接受参数，也可能有自身状态。一旦接收到的参数或自身状态有所改变，React组件就会执行相应的生命周期方法，最后渲染。

react组件三种构建方法 

1.React.createClass 

用React.createClass构建组件时React最传统，也是兼容性最好的方法

const Button = React.createClass({
    getDefaultProps() {
      return {
      color: 'blue',
      text: 'Confirm',
      };
},

render() {
    const { color, text } = this.props;
    return (
        <button className={'btn btn-${color}'}>
            <em>{text}</em>
        </button>
    );
   }
});

调用Button组件时，只用写成<Button />,就可以被解析成React.createElement(Button)方法创建Button实例，这意味着在一个应用中调用几次Button,就会创建Button实例。 

2.ES6 classes

import React, {Component} from 'React';

class Button extends Component {  //类似于继承
    constructor(props){
        super(props); //调用父类的构造函数
    }
    
    static defaultProps = {  
        color: 'blue',
        text: 'Confirm',
    };

    render() {
        const { color, text} = this.props;
        
        return (
            <button className={'btn btn-${color}'}>
                <em>{text}</em>
            </button>
        );
    }
}

 React的所有组件都继承自顶层类React.component.它的定义非常简单，只是初始化了React.component方法，super（props）就是调用Component的构造函数

3.无状态函数

function Button({ color = 'blue', text = 'Confirm' }) {
    return (
        <button className={'btn btn-${color}}>
            <em>{text}</em>
        </button> 
    );
}

无状态组件只传入props和context两个参数，也就是说，它不存在state,也没有生命周期方法，组件本身即是上面两种构建方法中的render（）方法。

 

2.用React实现tabs组件

 

无状态组件只会创建一个实例避免了不必要的检查和内存分配，做到了内部优化。

import React,{ Component, PropType} from 'React';

class Tabs extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div className="ui-tabs"></div>
    }
};

export default Tabs;  //导出Tab组件