likes
comments
collection
share

入门React——Component类组件模板（三）

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

目录

前言

尽管React官方推荐使用Hooks来编写功能组件，并且Hooks的确在很多场景下提供了更简洁、灵活的编码方式，但这并不意味着类组件的学习就失去了必要性。因为：

  1. 现有代码基础：许多现有项目和代码库仍然大量使用类组件。掌握类组件可以帮助你理解这些项目，并在需要时进行维护和扩展。
  2. 特定功能需求：尽管Hooks覆盖了许多类组件的功能，但在某些特定场景下，类组件依然有其优势。例如，类组件对于需要复杂生命周期方法（如getDerivedStateFromProps或shouldComponentUpdate）的场景可能更合适。
  3. 深入理解React机制：学习类组件有助于深入理解React的核心机制，包括状态管理、生命周期等概念，这对于成为一名全面的React开发者是很重要的。

类组件初识

前面我们已经了解的组件的创建与使用，这里我们先抛开概念，来了解一下类组件的创建模板。

//首先导入类组件
import {Component} from 'react'
// es6 Component基类   extends=继承
class AppHeader extends Component{
    //构造函数
  constructor(props){
  // super 父类构造函数
  super(props) //props为父类传递的参数
  //数据 props之外，还有state 自由状态
    this.state = {
    //状态
    }
  }
  // 类里的  abstract 方法，必须实现的
  // 没有render都是必须有的
  render(){
      return (<div></div>)
      }
  }

constructor()

constructor是一个特殊的方法，用于在创建类的新实例时初始化该实例。在React的类组件中，你通常会定义一个constructor方法来初始化组件的状态（state）和绑定事件处理函数。如果不显式定义constructor，React会为你提供一个默认的构造函数。

super(props)

当你在一个子类中这里是React组件类，继承自React.Component定义constructor时，你需要在使用this之前调用super(props)。因为：

  • 继承与初始化：super调用是JavaScript中继承机制的一部分。它用来调用父类（在这里是React.Component）的构造函数，确保父类能够正确初始化。如果不调用super，子类无法访问父类的属性和方法。
  • 传递props：在React类组件中，props是从外部传递给组件的数据，用于组件间的通信。通过在super调用中传递props，你可以确保这些属性被父类正确接收并处理，进而使组件能够访问到这些外部属性。

类组件基础方法

setState()

思考：当我们定义一个状态后，我们怎么去修改这个状态？

    this.state = {
    //状态
      emoji:'😊'
    }

使用this.state.emoji直接修改？这肯定是错误的，正确的做法是调用this.setStateAPI来修改state属性。

 this.setState({
      emoji:this.state.emoji==='😊'?'😀':'😊'
    })

效果演示：

入门React——Component类组件模板（三）

componentDidMount()

当我们想要设置这个笑脸自动1s变脸一次时，我们使用 setInterval()函数来回调

 setInterval(()=>this.changeEmoji(),3000)

入门React——Component类组件模板（三）

所以在这里我们使用component身上的componentDidMount()方法：componentDidMount是React类组件中一个非常重要的生命周期函数。在React的生命周期体系中，这个方法主要用于在组件已经被成功挂载到DOM之后执行一些初始化操作。

由于因此生命周期函数是在适时阶段自动调用的，因此我们只需要将 setInterval放入内部：

  componentDidMount(props){
    // 组件挂载完毕后执行
    setInterval(()=>this.changeEmoji(),1000)
  }

查看效果：

入门React——Component类组件模板（三）

component身上的创建到销毁过程相关的几个关键生命周期方法：

  1. constructor(props) : 组件构造函数，在组件实例被创建时被调用。用于初始化state和绑定this指向。
  2. static getDerivedStateFromProps(nextProps, prevState) : 静态方法，在组件实例被创建和更新时被调用。根据新的props和旧的state计算并返回一个要被设置为新的state的对象，或者返回null表示无需更新state。
  3. render() : 必须实现的方法，用于返回描述组件输出的React元素。每当组件接收到新的props或state时，都会重新调用此方法。
  4. componentDidMount() : 组件已经被渲染到DOM中后立即调用。在这里可以进行DOM操作、数据获取、设置定时器等初始化工作。
  5. shouldComponentUpdate(nextProps, nextState) : 返回一个布尔值，决定组件是否需要更新。默认行为是在props或state改变时返回true，触发重新渲染。
  6. getSnapshotBeforeUpdate(prevProps, prevState) : 在React应用更新 DOM 之前被调用。可以在这个方法里记录一些信息（例如滚动位置），这些信息将作为参数传递给componentDidUpdate。
  7. componentDidUpdate(prevProps, prevState, snapshot) : 组件更新后立即调用。可以在这里比较props和state的变化，并执行后续操作，如网络请求或DOM操作。如果有使用getSnapshotBeforeUpdate，则第三个参数会包含该方法返回的值。
  8. componentWillUnmount() : 组件即将卸载和销毁之前被调用。在这里应该执行必要的清理工作，比如取消网络请求、清除定时器等。

重复打印

在我们使用react中调用console.log()进行打印操作时，经常总是会出现两次的打印，第二次打印的颜色也是更浅一些

入门React——Component类组件模板（三）

这是因为React 严格模式（StrictMode）是一个开发工具，用于突出显示应用程序中潜在的问题。在开发模式下，React 的严格模式会有意调用两次构造函数以便帮助你捕获一些常见的错误。你可以检查你的 index.js 文件，看看你的应用是否包裹在 <React.StrictMode> 中：

入门React——Component类组件模板（三）

移除 StrictMode 仅用于确认和调试问题。在实际开发中，使用严格模式是一个很好的实践，因为它可以帮助你编写更健壮的代码。

转载自:https://juejin.cn/post/7386906038731849769
评论
请登录