React 第六章 生命周期

什么是生命周期

生命周期是一个物体、生物或概念从诞生、成长、衰老到死亡的过程。

React 在组件的生命周期中提供了一系列的钩子函数(类似于事件),可以让开发者在函数中注入代码,这些代码会在适当的时候运行。

生命周期钩子函数是属于类组件所独有的东西 ,但是从 React 16.8 推出 Hooks 以来,整体已经开始以函数组件为主,因此这里我们仅介绍一些常用的生命周期钩子函数。

完整的生命周期图谱,可以参阅官网:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

常用的生命周期钩子函数

有关生命周期钩子函数的介绍,可以参阅官网:https://zh-hans.reactjs.org/docs/react-component.html

官网中在介绍这些钩子函数时,也是分为了常用不常用两大块来介绍的。

由于现在react 已经不在推荐使用类组件,所以只简单了解常用的生命周期即可。后续如果有老项目维护,可以自行查阅。

常用的生命周期钩子函数如下:

  • constructor

    • 同一个组件对象只会创建一次
    • 不能在第一次挂载到页面之前,调用 setState ,为了避免问题,构造函数中严禁使用 setState
  • render

    • render 是整个类组件中必须要书写的生命周期方法

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

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

      • 数组或 fragments。 使得 render 方法可以返回多个元素。欲了解更多详细信息,请参阅 fragments 文档。

      • Portals。可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息,请参阅有关 portals 的文档。

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

      • 布尔类型或 null 或者 undefined。什么都不渲染。(主要用于支持 return test && 的模式,其中 test 为布尔类型。)

    • render 可能不只运行一次,只要需要重新渲染,就会重新运行

    • 严禁使用 setState,因为可能会导致无限递归渲染

react 复制代码
import React from "react";

// 类组件
class App extends React.Component {

  constructor() {
    super();
    // 主要做一些初始化操作,例如该组件的状态
    this.state = {
      value : 1
    }
    console.log("constructor");
  }


  clickHandle=()=>{
    this.setState({
      value : this.state.value + 1
    })
  }

  render() {
    console.log("render");
    return (
      <div>
        <div>{this.state.value}</div>
        <button onClick={this.clickHandle}>+1</button>
      </div>
    )
  }

}

export default App;
  • componentDidMount
    • 类似于 Vue 里面的 mounted
    • 只会执行一次
    • 可以使用 setState
    • 通常情况下,会将网络请求、启动计时器等一开始需要的操作,书写到该函数中
  • componentWillUnmount
    • 通常在该函数中销毁一些组件依赖的资源,比如计时器
相关推荐
2501_9159184112 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂13 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技13 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip13 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go14 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x14 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java14 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)14 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术15 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体