React Hooks状态用法案例讲解

文章结构概述

• 引言

  • • Hook概述

    • • Hook产生的背景
      • Hook的定义
      • Hook的应用环境
      • Hook的实施规范

    • 利用Hook实现计数器功能

    • 多种状态管理（实例）

    • 复杂状态处理（实例）

    • 获取先前状态值的方法

    • 结语

前言

本文将带领读者了解在React框架中Hooks的使用方式，作者在学习过程中也进行了相关记录，若存在总结不当之处，欢迎各位提出宝贵意见，共同探讨与交流~

Hook简介

为什么会出现Hook

1.通过前期对react框架的学习可知,class组件具备定义自身state的能力,该state用于存储组件内部的状态信息。而function组件不具备状态管理功能,这是因为函数式组件中的变量具有局部特性,每次调用函数时都会创建新的内存空间和变量实例,当函数执行完毕后这些变量将被系统回收。
2.class组件具有完整的生命周期机制,我们可以在对应的生命周期阶段实现特定的业务逻辑。当class组件的状态发生变化时,系统会自动触发render方法的重新执行。相比之下,函数式组件在进行重新渲染时会完整执行所有代码逻辑,且无法调用componentDidUpdate等生命周期方法,同时也缺乏维护自身