前言

本篇文章带大家学习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 (
        <div>、
            <h1>Hook</h1>
            <p>{state}</p>
            <button onClick={(e) => setState(state + 1)}>点击</button>
        </div>
    )
}

实现效果：

当然了，这里代码我们还可以使用解构进行精简：

export default function App() {
    const [state, setState] = useState(0)
    return (
        <div>
            <p>{state}</p>
            <button onClick={(e) => setState(state + 1)}>+1</button>
            <button onClick={(e) => setState(state - 1)}>-1</button>
        </div>
    )
}

多个状态(案例)

上面讲的是一个状态，来看看多个状态怎么操作，写个简单的例子：
1.首先还是头部引入 useState
2.然后对要用到的数据进行结构，这里也定义了数组和对象的数据类型
3.需要用到的地方直接{age}使用即可
4.需要做操作的地方，使用结构的第二项函数进行操作即可，这里按钮就是给city数组添加元素

import React, { useState } from 'react'

export default function App() {
    const [age, setAge] = useState(18)
    const [money, setMoney] = useState(1000000000)
    const [city, setStar] = useState(['北京', '上海', '广州'])
    const [obj, setObj] = useState({name: '张三', age: 14})
    return (
        <div>
            <h1>张三同学： {age}岁</h1>
            <h2>他的存款： {money}万</h2>
            <ul>
                {
                    city.map((item, index) => {
                        return (<li key={item}>{item}</li>)
                    })
                }
            </ul>
            <h3>{obj.name}今年{obj.age}岁</h3>
            <button onClick={e=>{setStar([...city, '深圳'])}}>给数组加元素</button>
        </div>
    )
}

实现效果：
·

复杂状态(案例)

这里我们实现一个模拟电影票的案例，点击按钮可以实现票价的调整
1.前面把数据解构就不说了
2.这里要通过点击每一项后面的按钮，改变对应项的票价，所以在函数中需要把index下标传入进去
3.然后在函数中，先把操作的数组拷贝一份，然后让里面对应index的数据项的价格改变，最后用setMovies进行修改

export default function App() {
    const [movies, setMovies] = useState([
        {id: 1, name: '守岛人', price: 50},
        {id: 2, name: '1921', price: 35},
        {id: 3, name: '哆啦A梦', price: 60},
        {id: 4, name: '中国医生', price: 40},
        {id: 5, name: '时间规划局', price: 55}
    ])

    function changePrice(index) {
        console.log(index)
        const movieList = [...movies]
        movieList[index].price += 5
        setMovies(movieList)
    }

    return (
        <div>
            <ul>
                {
                    movies.map((item, index) => {
                        return (
                            <li key={item.id}>
                                <span>电影名:《{item.name}》</span>
                                <span>票价:￥{item.price}</span>
                                <button onClick={e => changePrice(index)}>涨价了</button>
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    )
}

使用之前状态值

如果我们需要使用之前的状态值来改变现有状态值，应该如何去做呢？
看下面例子：需求是做一个累加100的操作
1.==如果新state需要通过使用先前的state计算或者操作的话，我们可以使用函数传递给setstate,这个函数可以接收之前的值，并且返回更新后的值==
2.所以在点击事件中，使用setstate的参数，也就是先前的state，对该参数进行操作

export default function App() {
    const [state, setstate] = useState(() => 100)
    return (
        <div>
            <h1>{state}</h1>
            <button onClick={e => setstate((prev) => prev + 100)}>+100</button>
        </div>
    )
}

最后

本篇文件就到这里结束啦，主要给大家介绍了hooks中对于状态的用法，下篇文章会给大家继续讲解hooks它的生命周期相关的知识~