likes
comments
collection
share

React 学习：类组件与生命周期函数

作者站长头像
站长
· 阅读数 21

在前端开发中，学习使用React是很重要的；React 采用组件化的设计理念，允许开发者将复杂的 UI 分解为一系列可复用的组件，每个组件负责渲染页面的一部分，这使得代码更容易维护和扩展；今天让我们接着学习React中的类组件开发以及React中的组件生命周期的概念，进一步探讨企业级的React项目开发的过程。

React 学习：类组件与生命周期函数

同样的，我们可以用命令行**npm init vite**，以vite代替传统的create-react-app作为react项目脚手架去更加快速地搭建一个react项目，用react-demo命名。

React 学习：类组件与生命周期函数

React 类组件

在react中，页面都是由一个个组件构成的，一个完整的页面就如同一棵组件树一般；那么何为组件呢？

React 学习：类组件与生命周期函数

组件是日常开发和协作的单元，是构成应用程序的基本构建块；组件主要是由HTML、CSS和JS构成的可复用功能的组合并且要能返回 jsx 的函数，在react中使用组件类就像HTML一样，把标签插入即可；其中类组件还包含props（父组件传的参数）以及它的自有状态（state）。

接下来我会在demo中向大家逐一讲解：

在单点入口文件main.jsx中，就是在根节点（挂载点）root中挂载了App.jsx这个组件；

React 学习：类组件与生命周期函数

我们在开发App项目时，也只需要在App.jsx中进行挂载即可，每一步都要分工明确；

React 学习：类组件与生命周期函数

可以看到在App.jsx文件中，我们又往上面挂载了一个AppHeader组件，所以在react中我们开发的主要方式是组件化，搭建组件树，接下来我们就要对AppHeader组件进行开发；

类组件是 React 中定义组件的一种方式，它是基于 JavaScript 的类 （ES6 类） 来创建的。类组件相对于函数组件的一个主要优势是它们可以拥有内部状态（state）和生命周期方法（lifecycle methods） ，这使得它们能够处理更复杂的状态管理和生命周期操作。

constructor 构造函数

对于类组件的开发，我们要先导入它的基类Component，再用class关键字声明出AppHeader类继承自组件类Component，这样我们就能获取到父类Component身上的属性和方法；

React 学习：类组件与生命周期函数

其中constructor(props)是AppHeader类的构造函数；而类组件可以接收来自父组件的属性，这些属性称为 props。通过 this.props 访问；关键字 super 在子类的初始化中可以用于调用父类的构造函数，这是初始化继承自父类的属性所必需的。

除了继承自父类的属性外，类组件可以拥有内部状态（state），状态是组件的数据容器；当状态发生变化时，组件将会重新渲染。状态通过 this.state 访问。

render 函数

在类组件中，必须自己重写 render 方法 返回组件的JSX；如果没有 render ，哪里有 html 呢？

React 学习：类组件与生命周期函数

其中，AppHeader类上的属性，我们都可以通过this关键字访问实例对象身上的方法。

类组件中的方法 changeEmoji

在我们的代码中，设置了类组件的状态属性，同样地，我们也可以为这个状态属性定义一个方法changeEmoji去更改类组件的状态；

React 学习：类组件与生命周期函数

其中，setState是React类组件中 Component原型上定义的一个方法，它的子类AppHeader的实例化对象也能访问到setState，用于更新组件的局部状态（state)。

生命周期函数 componentDidMount

类组件提供了多个生命周期方法，这些方法在组件的不同阶段自动调用，允许你执行特定的代码。例如，componentDidMount 在组件挂载到 DOM 后立即调用。

React 学习：类组件与生命周期函数

每当页面的组件挂载完成后，组件的生命周期函数就会开始执行；每一秒钟就调用一次方法changeEmoji改变组件的状态。

ES 6 的功能

在上面的代码中，

关键字class是es6版本才发行出来的，它的目的就是为了让 js 逐渐成为大型企业级开发语言；走向传统（class）的面向对象开发，让设计模式好用起来，因为原型式的面向对象，其他开发者不太熟悉；但是在js中class 只是语法糖，底层逻辑还是prototype。

关键字extends 轻松实现继承，这使得面向对象层次更加细腻；

大型企业级别的开发都是围绕着封装、继承、多态三大特征；以react的源码为例，在Component 组件基类中，constructor super(props) 基类构造函数先执行，再构造自己的状态（state），最后还必须重写render 方法 返回组件的JSX。

react核心 响应式

在react中，传统的DOM编程时代已经过去，document.getElementById innerText()等方法性能不好，而且在react中不需要这种硬编程（API）了；

对于组件的动态部分（如状态的更新）可以更加灵活地实现

    this.state = {
        isLogin: false,
        emoji: '😊'
    }
    this.setState({
        isLogin: true,
        emoji: '😭'
    })

react中这种响应式的更新更好，组件的状态变化了，界面会自动局部更新（精准打击）。

组件的生命周期

React 组件具有明确的生命周期，从创建、挂载、更新到卸载，每个阶段都有相应的生命周期方法。在App组件中，先是实例化了类组件AppHeader，componentDidMount是基类Component 的生命周期的方法，它会在JSX 渲染完成之后，AppHeader 有DOM 结构挂到App组件上后才运行，自动运行，启动定时器修改状态，界面会（得有那个节点）自动更新。

React 学习：类组件与生命周期函数

完整类组件代码如下：

import { Component } from "react";
// 类组件
// es6 Component 基类 继承
class AppHeader extends Component {
    constructor(props){
        // super 父类构造函数
        super(props)
        // 数据 props之外，还有state 自有状态
        // state 状态
        this.state = {
            // 状态
            emoji: '笑脸'
        }

        // setInterval(()=>this.changeEmoji(), 3000)
        console.log('111');
    }
    // onload 
    // 生命周期函数 组件挂载到页面后
    componentDidMount() {
        console.log('222');
        // 组件已挂载
        setInterval(()=>this.changeEmoji(), 1000)
    }
    componentDidUpdate() {
        console.log('update', this.state.emoji);
        // 组件更新了
    }
    // 方法
    changeEmoji =()=>{
        // Component 内置方法setState
        this.setState(  // setState是React类组件中Component原型上定义的一个方法，用于更新组件的局部状态（state)
            {
                emoji: this.state.emoji === '笑脸' ? '哭脸' : '笑脸'
            }
        )
    }

    // 类里的abstract 方法，必须实现的
    // 没有render 哪里有html呢？
    render() {
        const { name } = this.props
        const { emoji } = this.state

        return (
            <div className="app-header">
                <h1 className="title">{name} {emoji}</h1>
            </div>
        )
    }
}

export default AppHeader;
转载自:https://juejin.cn/post/7386701961809346572
评论
请登录