React组件的定义与使用

雨落云尚2023-10-25 10:14

组件-函数概念

学习目标： 认识组件的概念，了解租件与页面和其他组件的关系

1. 每一个组件和页面上每一个模块形成一一对应的关系。组件之间可以形成一个嵌套关系，可以进行数据流通

2. 一个庞大项目由一个个组件像搭积木一样搭建起来，最终形成一个复杂的应用

3. 组件化这种模式更加利于代码复用

4. 组件的应用提高了可维护性

组件-函数组件

学习目标： 能够独立使用函数完成 react 组件的创建和渲染
概念：

使用 JS 的函数（或箭头函数）创建的组件，就叫做函数组件
组件的定义与渲染：

js 复制代码

// 定义函数组件
function HelloFn() {
  return <div>这是一个函数组件</div>
}

// 定义类组件
function App() {
  return (
    <div>
      {/* 渲染函数组件 */}
      <HelloFn />
      <HelloFn></HelloFn>
    </div>
  )
}

export default App
注意：

1. 组件名首字母必须大写,react 内部会根据这个来判断是组件还是普通的 HTML 标签

2. 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

3. 组件就像 HTML 标签一样可以被渲染到页面中，组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值

4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭和出现

组件-类组件

学习目标： 能够独立完成类组件的创建和渲染

使用 ES6 的 class 创建的组件，叫做类(class)组件
组件的定义与渲染：

js 复制代码

// 引入Raact核心包
import React from 'react'
// 继承写法
class HelloComponent extends React.Component {
  render() {
    return <div>this is HelloComponent</div>
  }
}
function App() {
  return (
    <div>
      <HelloComponent />
      <HelloComponent></HelloComponent>
    </div>
  )
}

export default App

约定说明：

1. 类名称首字母必须大写

2. 类组件应该继承 React.Component 父类,从而使用父类中提供的方法和属性

3. 类组件必须提供 render 方法，render 方法必须有返回值，即该组件的 UI 结构