React组件化-类组件和函数组件介绍

痛定思痛。 2023-10-02 20:52 32阅读 0赞

#### 文章目录 ####

*  React组件化开发
 *   *  组件化开发思想
     *  React的组件化
     *  React中类组件
     *  React函数组件

## React组件化开发 ##

### 组件化开发思想 ###

**组件化是一种分而治之的思想**

> 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
> 
> 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

**我们需要通过组件化的思想来思考整个应用程序**：

> 我们将一个完整的页面分成很多个组件；
> 
> 每个组件都用于实现页面的一个功能块；
> 
> 而每一个组件又可以进行细分；
> 
> 而组件本身又可以在多个地方进行复用；

**组件化是React的核心思想，也是我们后续课程的重点，前面我们封装的App本身就是一个组件**：

> 组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
> 
> 任何的应用都会被抽象成一颗组件树。

### React的组件化 ###

**组件化思想的应用：**

> 有了组件化的思想，我们在之后的开发中就要充分的利用它。
> 
> 尽可能的将页面拆分成一个个小的、可复用的组件。
> 
> 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

**React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件**：

> 根据组件的定义方式，可以分为：`函数组件`(Functional Component )和`类组件`(Class Component)；
> 
> 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；
> 
> 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；

**这些概念有很多重叠，但是他们最主要是关注数据逻辑和UI展示的分离**：

> 函数组件、无状态组件、展示型组件主要关注UI的展示；
> 
> 类组件、有状态组件、容器型组件主要关注数据逻辑；

**当然还有很多组件的其他概念：比如异步组件、高阶组件等，我后续文章会进行讲解。**

### React中类组件 ###

**类组件的定义有如下要求：**

**组件的名称是大写字符开头（无论类组件还是函数组件）**

> 类组件需要继承自 `React.Component`
> 
> 类组件`必须`实现render函数

**在ES6之前，可以通过create-react-class 模块来定义类组件，但是目前官网建议我们使用ES6的class类定义。**

**使用class定义一个组件**：

> constructor是可选的，我们通常在constructor中初始化一些数据；
> 
> this.state中维护的就是我们组件内部的数据；
> 
> render() 方法是 class 组件中唯一必须实现的方法；

import React, {
         Component } from 'react'
    
    export class App extends Component {
        
      // 在constructor中初始化一些数据
      constructor() {
        
        super()
    
        // this.state中维护的就是我们组件内部的数据
        this.state = {
        
          message: "Hello World"
        }
      }
    
      // render函数是唯一必须实现的
      render() {
        
        const {
         message } = this.state
    
        return (
          <div>
            <h2>{
        message}</h2>
          </div>
        )
      }
    }
    
    export default App

**当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一**：

> **React 元素**：
> 
>  *  通常通过 JSX 创建。
>  *  例如，`<div/>` 会被 React 渲染为 DOM 节点，`<MyComponent/>` 会被 React 渲染为自定义组件；
>  *  无论是元素标签 `<div/>` 还是自定义组件 `<MyComponent/>` 均为 React 元素。

export class App extends Component {
        
      constructor() {
        
        super()
        this.state = {
        
          message: "Hello World"
        }
      }
    
      // render函数是唯一必须实现的
      render() {
        
        const {
         message } = this.state
    		
        // 1.react元素: 通过jsx编写的代码就会被编译成React.createElement, 所以返回的就是一个React元素
        return (
          <div>{
         message }</div>
        )
      }
    }

> **数组或 fragments(*fragments*后续文章讲解)**：使得 render 方法可以返回多个元素。

export class App extends Component {
        
      render() {
        
        // 2.返回数组
        return ["aaa", "bbb", "ccc"]
      }
    }

export class App extends Component {
        
      render() {
        
        // 2.返回数组
        return [
          <h2>我是标题</h2>,
          <div>我是内容</div>,
          <i>我是斜体</i>
        ]
      }
    }

> **Portals**：可以渲染子节点到不同的 DOM 子树中(*后续文章讲解*)。
> 
> **字符串或数值类型**：它们在 DOM 中会被渲染为文本节点

export class App extends Component {
        
      render() {
        
        // 3.返回字符串或数值类型
        // return "aaa"
        return 123
      }
    }

> **布尔类型或null**：什么都不渲染

export class App extends Component {
        
      render() {
        
        // 4.返回布尔类型
        // return true
        return false
      }
    }

### React函数组件 ###

**函数组件是`使用function来进行定义`的函数，只是这个函数会返回和类组件中render函数返回一样的内容**。

**函数组件有自己的特点（当然，后面我们会讲hooks，就不一样了）**：

> 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
> 
> this关键字不能指向组件实例（因为没有组件实例）；
> 
> 没有内部状态（state）；

**我们来定义一个函数组件：**

export default function App() {
        
      return (
        <div>
          <h2>我是标题</h2>
          <div>我是内容哈哈哈</div>
        </div>
      )
    }

**在现阶段的学习中，我主要讲解类组件，后面学习Hooks时，会针对函数式组件进行更多的学习**。