搞懂react中Hooks 状态的用法(案例讲解)

Beiyux

已于 2022-03-20 12:11:44 修改

阅读量1.3k

点赞数 3

分类专栏： React 文章标签： react.js javascript 前端

于 2022-03-19 07:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_45745641/article/details/123587299

版权

本文详细介绍了React Hooks中的状态管理，包括Hook的由来、使用场景和原则。通过实例解析了如何使用useState实现累加器、管理多个状态及处理复杂状态。还探讨了如何在函数组件中利用先前状态值进行更新。

摘要由CSDN通过智能技术生成

文章目录

前言

前言

本篇文章带大家学习react中hooks的用法，自己也是在学习过程中进行记录，如果有总结不恰当的地方欢迎大家指出来，一起交流~

Hook简介

为什么会出现Hook

1.在我们之前对react的学习中我们知道,class组件可以定义自己的state,用来保存组件自己内部的状态,function组件是没有状态的,因为函数式组件的变量他是局部的,每次调用都会开辟新的空间和新的变量,函数运行完毕以后,变量会被回收。
2.class组件有生命周期,我们可以在对应的生命周期中完成自己的逻辑,class组件在状态改变的时候会重新去执行render方法。而函数式组件在重新渲染的时候,会全部执行,又没有办法去调用componentDidUpdate,并且没有自己的状态。

什么是Hook

Hook是React16.8的新增特性。它可以让你在不编写class组件的情况下使用state以及其他的React特性(生命周期方法)。
Hook的出现,是开创性的,它解决了之前React存在的很多问题,比如说HOC的嵌套问题。

Hook的使用场景

Hook的出现,基本可以替代我们之前所使用的calss组件的地方
在旧的项目中,不需要直接重构为Hook
Hook只能在函数组件中使用,不能在类组件,或者函数组件之外的地方使用

Hook的使用原则

不要在循环里面、条件判断或者分支里面去使用Hook,只能在函数的最外层调用
只能在react函数组件中使用hook
单独在一个useState我们称之为hook,Hooks是对一类Hook的总称。

Hook实现累加器

在使用hook之前，我们先使用之前学习的类组件来实现累加器：

export class Add extends Component {
   
    state = {
    count: 1 }
    render() {
   
        return (
            <div>
                <h1>{
   this.state.count}</h1>
                <button onClick={
   this.add}>点击</button>
            </div>
        )
    }
    
    add = () => {
   
        this.setState({
   count: this.state.count + 1})
    }
}

比较简单，大家应该都能很快的实现，下面来使用hook实现这个累加器：
1.头部我们要引用一个新的东西useState，后面需要使用它
2.useState本身是一个函数,调用之后返回一个数组，第一项是状态，第二项是修改和设置我们状态的函数方法
3.定义一个state接收arr[0]，定义变量setState为arr[1]，也就是拿到第二项函数
4.给按钮绑定点击事件，实现累加效果

import React, {
    useState } from 'react'
export default function App() {
   
    const arr = useState(0)
    const state = arr[0]
    const setState = arr[1]
    return (