狭义上的组件与广义上的组件
狭义上的组件又称为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组件