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

前言

本篇文章带大家学习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的使用场景

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

Hook的使用原则

1. 不要在循环里面、条件判断或者分支里面去使用Hook,只能在函数的最外层调用
2. 只能在react函数组件中使用hook
3. 单独在一个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 (