组件库的使用和自定义组件
组件库介绍
首先我们来说说组件的概念
组件是对数据和方法简单的封装，组件拥有自己的属性和方法。属性是组件数据的简单访问，方法是组件简单可见的功能。
这是比较官方的对组件概念的文字描述，但是怎么去理解呢?
接下来我们还是回到前端组件这个话题上来。在前端，我们可以分为前端重构和前端交互，首先我们先说说重构，顾名思义重构就是重新构建，是指我们将设计稿重新构建成计算机浏览器可编译、可认识的语言-HTML和CSS。HTML用于创建页面数据的展示结构，定义各种数据展示标签;CSS定义了数据的展示样式。在页面中，数据源于HTML结构中的文字、图片、链接、按钮、表单元素等;CSS则体现了动作和功能，比如选中、显示、隐藏等等。那么，到底什么才是组件呢?前端组件，就是组成页面内容的零件，它是HTML结构和CSS样式的综合体，组件本身并无交互效果。注意，不是任何一段HTML标签都可以叫做组件。
它必须具备以下几个特性：
- 组件是页面中公共的、相对独立的最小单位；
- 组件是由一个或多个HTML元素组成的集合；
- 组件可以没有功能，但必须拥有数据，一个空标签集合不能称作有效的组件；
常见的组件库：
Vue2
Element ：
element.eleme.cn/#/zh-CN/com… 主用于后台项目
Vant：
youzan.github.io/vant/#/zh-C… 主用于移动端项目
uView:
v1.uviewui.com/components/… 使用 uniapp 开发时
Vue3：
Element- plus:
React：
Ant Design:
ant.design/components/… 这是一个可以用来快速设计后台 / 内部应用的 UI 库。
它拥有一个社区、大量支持文档，还有一个带有预制模板的单独项目AntDesignPro。
AntDesign的缺点主要有三点：一是缺乏可访问性；二是体积很大，预计会对性能产生较大影响；三是会污染你的 CSS。
Bootstrap:
它可以看作是一个UI库，虽然不会帮你赢得任何设计奖项，但可以用来完成一些边缘项目和最小可行产品。
不过这取决于你要使用它的目的，如果你不熟悉 React，那么它是一个很好的入门库。但对于经验更丰富的开发人员来说，他们可能会去研究 styled-components / Emotion。
Bootstrap 的优点主要有五点：一是能快速上手；二是拥有两个带有 React 绑定的 Bootstrap 库；三是能通过 CSS-in-JS 轻松自定义；四是已经流行了足够长的时间了，因此不必担心一些错误 / 问题的发生；五是没有 jQuery 依赖，因为它已在 React 中完全重新实现。
Bootstrap 的缺点是，如果你不做自定义，那么你的网站将和其他网站没什么区别。
常用的icon图标库
阿里巴巴矢量图标库
自定义组件
函数式声明组件：
顾名思义，就是将一个函数作为一个组件（函数名第一个字母大写是组件，小写是函数），然后调用组件并且给组件传参。
<script type="text/babel">
/**
* 1.父组件
*/
function FartherComponent(){
return (
<div>
<h1>父组件给子组件传值</h1>
/**
* 调用子组件，并且给子组件传值book=1
*/
<ChildComponent book={1}/>
</div>
)
}
/**
* 2.子组件
* @param {Object} props 父组件给子组件传递的参数
*/
function ChildComponent(props){
/**
* props是父组件给子组件传递的参数对象，book是参数对象中的一个属性
*/
return <p>子组件接收到的值是: {props.book}</p>
}
ReactDOM.render(<FartherComponent/>,document.getElementById('test1'));
</script>```
类式声明组件
```js
<div id="test"></div>
<script type="text/babel">
/**
* 1.使用类声明一个组件
*/
class MyComponent extends React.Component {
/**
* 构造器的作用
* 1，指定this
* 2，设置初始化状态this.setState({});
* 3，为构造函数绑定this
*/
constructor(props) {
super(props);//指定this，可以使用this
//this.state = {name:'name',value:'value'}设置初始化状态
//this.attr = this.attr.bind(this)为事件处理函数绑定实例
}
render(){
return (
<div>
<h3>这是用类创建出来的组件,接收数据是：{this.props.data}</h3>
</div>
)
}
}
/**
* 2.调用组件并且传递参数
*/
ReactDOM.render(<MyComponent data='接收数据'/>,document.getElementById('test'));
</script>
