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

Posted 2023-04-04 学全栈的灌汤包

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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时，会针对函数式组件进行更多的学习。

React 组件（函数类组件）

组件与模块概念

模块：

理解：向外提供特定功能的 js程序, 一般就是一个 js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
作用：复用 js, 简化 js的编写, 提高 js运行效率

组件：

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

模块化： 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化： 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

React ：元素构成组件(复杂的组件由多个组件构成)，组件又构成应用。
React核心思想是组件化，其中组件通过 属性(props) 和 状态(state) 传递数据。

React 组件介绍

React组件可以将UI切分成一些独立的、可复用的部件，这样有助于设计人员专注于构建每一个单独的部件。尽管React组件与JSX代码实现的功能基本一致，但从设计角度上讲还是推荐使用React组件方式。原因是：将React组件和Props结合使用可以实现更灵活的功能

React通过组件的思想，将界面拆分成一个个可复用的模块，每一个模块就是一个React 组件。一个React应用由若干组件组合而成，一个复杂组件也可以由若干简单组件组合而成。
React 组件可以用好几种方式声明，可以是一个包含 render()方法的类，也可以是一个简单的函数，不管怎么样，它都是以props作为输入，返回 React 元素作为输出。
React语法是基于版本ECMAScript6实现的。因此，React组件除了通过JavaScript函数形式实现，还可以通过ES6 Class(类)的形式来实现。

函数组件

JavaScript 函数构建的组件一定是无状态组件。它能传入props和context两个参数，没有state，除了render()，没有其它生命周期方法。但正是这样，函数组件才更加专注和单一，它只是一个返回React 元素的函数，只关注对应UI的展现。函数组件接收外部传入的props，返回对应UI的DOM描述。

const reactDiv=document.getElementById('react-div');
//定义一个函数（组件） 函数名首字母必须大写
function HelloReact(){
	console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
    return <div>
       		   <h2>React组件：</h2>
               <p>我是函数组件</p>
           </div>
}
//DOM的渲染
ReactDOM.render(<HelloReact/>,reactDiv);

ReactDOM.render()作用：

React解析组件标签，找到了HelloReact组件。
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

类组件

相比于函数式组件功能更强大。它有state，以及不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件可能是无状态组件，也可能是有状态组件

//定义类：必须是React.Componet类的子类,类名的首字母必须大写
class HelloReact extends React.Component{
    render() {
       return <div>
                <label>姓名：
                      <input type="text" />
                      </label>
              </div>
    }
    //1、render是放在哪里的？—— HelloReact的原型对象上，供实例使用。
	//2、render中的this是谁？—— HelloReact的实例对象 <=> HelloReact组件实例对象。
}
//组件渲染        
ReactDOM.render(<HelloReact/>,document.getElementById('react-div'));