React入门 ③ -- React 组件介绍

组件

对特定功能的封装，主要用来对UI进行拆分。

特点

• 独立
• 可复用
• 可组合

 分类

• 基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件
• 业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框
• 区块组件：由基础组件组件和业务组件组合成的UI块
• 页面组件：展示给用户的最终页面，一般就是对应一个路由规则

React 组件的两种创建方式

React 组件有两种创建方式

1. 使用 JS 中的函数创建组件
2. 使用 JS 中的 class 创建组件

对比

1. 类组件比较繁琐
2. 函数式组件比较简便

目前市面上的项目中都有使用

函数式组件-使用函数创建组件

定义组件

使用 JS 的函数(或箭头函数)创建的组件，叫做 函数组件

• 约定1：函数名首字符大写

  必须以 大写字母开头，React 据此区分 组件和 普通的 HTML

• 约定2：必须有返回值

  表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

  示例

// 1. 使用普通函数创建组件：
function Hello() {
  return <div>这是我的第一个函数组件!</div>
}

function Button() {
  return <button>按钮</button>
}

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

使用组件 

使用组件就像使用 HTML 标签一样。用函数名称作为组件标签名称

// 使用 双标签 渲染组件：
<Hello></Hello>

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

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

类组件-用class创建组件

定义格式

使用 ES6 的 class 创建的组件，叫做类（class）组件

// import { Component } from 'react'
// class 类名 extends Component {
import React form 'react'
class 类名 extends React.Component {
  // ... 
  render () {
    return 本组件的UI结构
  }
}

注意:

• 类名必须以大写字母开头
• extends是一个关键字，用来实现类之间的继承。类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性。
• 类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构。render会在组件创建时执行一次

示例 

// 导入 React
import React from 'react'
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}

使用组件

// 导入 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'))

使用组件的方式与函数式组件一致：可以使用单标签和双标签

有状态组件和无状态组件

什么是状态(state)

定义：是用来描述事物在某一时刻的形态的数据。一般称为state。例如：9月23号时书的库存数量； 18岁时人的身高；

特点：

• 状态能被改变，改变了之后视图会有对应的变化

作用：

• 保存数据。例如：要循环生成一份歌曲列表，那要提前准备好歌曲数据吧
• 为后续更新视图打下基础。如果用户点