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'exportclassAppextendsComponent{// 在constructor中初始化一些数据constructor(){super()// this.state中维护的就是我们组件内部的数据this.state ={message:"Hello World"}}// render函数是唯一必须实现的render(){const{ message }=this.state

    return(<div><h2>{message}</h2></div>)}}exportdefault App

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

React 元素：

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

exportclassAppextendsComponent{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 方法可以返回多个元素。

exportclassAppextendsComponent{render(){// 2.返回数组return["aaa","bbb","ccc"]}}

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

Portals：可以渲染子节点到不同的 DOM 子树中(后续文章讲解)。

字符串或数值类型：它们在 DOM 中会被渲染为文本节点

exportclassAppextendsComponent{render(){// 3.返回字符串或数值类型// return "aaa"return123}}

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

exportclassAppextendsComponent{render(){// 4.返回布尔类型// return truereturnfalse}}

React函数组件

**函数组件是

使用function来进行定义

的函数，只是这个函数会返回和类组件中render函数返回一样的内容**。

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

没有生命周期，也会被更新并挂载，但是没有生命周期函数；

this关键字不能指向组件实例（因为没有组件实例）；

没有内部状态（state）；

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

exportdefaultfunctionApp(){return(<div><h2>我是标题</h2><div>我是内容哈哈哈</div></div>)}

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