前言:
以下关于组件的定义以及特点等概念跟Vue中的组件基本一致,
本文主要介绍react中的组件以及基本使用
1.组件定义及基本特点:
1.定义:
应用程序中根据UI结构划分的不同共能的代码的集合
2.特点:
- 独立
- 可复用
- 可组合
3.分类
- 基础组件：指
input、button这种基础标签，以及antd封装过的通用UI组件 - 业务组件：由基础组件组合成的业务抽象化UI。例如公司部门信息的下拉框
- 区块组件：由基础组件组件和业务组件组合成的UI块
- 页面组件：展示给用户的最终页面，一般就是对应一个路由规则
2.React 组件的两种创建方式
1.js函数式组件:
使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件
示例:
//导入依赖
import React from 'react'
import ReactDOM from 'react-dom'
const title = <h1>react中的函数式组件</h1>
// 1.使用箭头函数定义一个函数式组件
const Zkp = () => {
return <div>给我一个div</div>
}
// 2.使用普通函数定义一个函数式组件
function Button() {
return <button></button>
}
// 3.使用组件,单标签和双标签模式使用都可以
const content = (
<div>
{title}
{<Zkp />}
{<Button />}
</div>
)
// 渲染
ReactDOM.render(content, document.getElementById('root'))
注意事项:
-
1：函数名首字符大写
组件名称须以大写字母开头，React 据此区分
组件和普通的 HTML -
2：必须有返回值
表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
2.类组件-用class创建组件
格式:
使用 ES6 的 class 创建的组件，叫做类（class）组件
示例:
//1.导入依赖
import React from 'react'
import ReactDOM from 'react-dom'
const title = <h1>react中的函数式组件</h1>
// 2. 定义一个类组件
class Zkp extends React.Component {
render () {
return <div>给我一个div</div>
}
}
// 3.使用组件,单标签和双标签模式使用都可以
const content = (
<div>
{title}
{<Zkp />}
</div>
)
// 渲染
ReactDOM.render(content, document.getElementById('root'))
注意事项:
- 类名必须以大写字母开头
- extends是一个关键字，用来实现类之间的继承。类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性。
- 类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构。render会在组件创建时执行一次
3.总结:
此次介绍的react组件分为函数式组件和类组件,
有关react组件的状态, 修改组件状态 , 以及 受控组件和非受控组件请参考react组件的状态修改,事件绑定,以及事件处理this指向问题
