React的组件简述

1.React的组件介绍

React组件时对特定的功能进行封装，主要用与对ui进行拆分，它有着独立，可复用，可组合的特点；主要的分为4大类：1.基础组件：指input和button这种基础标签，以及antd封装过的通用组件

2.业务：组件：由基础组件合成的业务抽象化UI。例如：包含了A公司所有部门信息的下拉框。3.区块组件：由基础组件和业务组件组合成的ui块。4.页面组件：展示给用户的最终页面，一般就是对应一个路由规则。

2.React组件的创建方式

React提供两种创建方式分别是：js中的函数创建组件，js中的class创建组件

import React from 'react'
import ReactDOM from 'react-dom'

const title = <h1>react的两种组件</h1>

// 定义一个函数式组件
const Com1 = () => {
  return <div>函数式组件</div>
}

// 定义一个类组件
class Com2 extends React.Component {
  render () {
    return <div>类组件</div>
  }
}

const content = (
  <div>
    {title}
    {<Com1 />}
    <hr />
    {<Com2 />}
  </div>
)

ReactDOM.render(content, document.getElementById('root'))

注：从上面的代码可以看出 类组件比较的繁琐代码比较多，但是不能因为麻烦而不学，函数式组件是较新的方法，但是不能保证有的公司依然在使用类组件，多学习有助于提高工作效率

3.函数组件的使用

函数组件在书写时大多数代码与js高级一样，但是它有几个属于它自己的书写规则

规则1：函数名首字母大写，这是React用于区分组件和普通HTML的方法

规则2：必须有返回值，用于表示组件的ui结构，如果不需要渲染内容则返回null

const Hello = () => <div>这是我的第一个函数组件!</div>// 使用箭头函数创建组件


// 使用组件：方法类似与HTML标签，用函数名作为组件标签使用

// 根据自己的类容选择单标签或者双标签
// 使用 双标签 渲染组件：
<Hello></Hello>

ReactDOM.render(<Hello></Hello>, root)

// 使用 单标签 渲染组件：
<Hello />
ReactDOM.render(<Hello />, root)

4.class类组件的使用

 使用ES6的class创建的组件，叫类(class)组件

同样它也有自己的书写规则

规则1：类名首字母大写

规则2：extends是一个关键字，用来实现类之间的继承。类组件应该继承React.Component父亲，从而使用父类中提供的方法或者属性

规则3：类组件必须提供render方法，render方法必须有返回值，表示该组件的ui结构。render会在组件创建时执行一次

// 导入 React
import React from 'react'
import ReactDom from 'react-dom'
// 1. 定义组件
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}

const content = (<div><Hello/></div>)

ReactDOM.render(content, document.getElementById('root'))