“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情”

1. 简介

我个人是很喜欢React Hooks的，但是初学者看来是非常混乱的，我们这里就介绍使用一下常用的Hooks

Hook 只能在函数组件中使用，不能在类组件中使用

1.代码学习

1. useState

这是一个非常重要的Hook，我们就做一个计数器的功能, useState 的调用不能放在判断中，循环中，嵌套函数中

先导入我们需要使用的hook

import {useState} from "react";

使用ts语法定义一个hook
```
const [count, SetCount] = useState<number>(0)
```
1. useState(0) 中的0是一个初始值，可以定义为其他的数字
2. useState 给我们返回的是一个数组，第一项是状态值，第二项更新状态的Function
3. 状态改变，React 会重新渲染组件，让我们获取到新的状态值

定一个组件

function CounterCom() {
    const [count, setCount] = useState<number>(0)
    return <>
        <button>-</button>
        <span><strong>{count}</strong></span>
        <button>+</button>
    </>
}

第二行定义了一个状态

再定义两个更新状态的方法

// 递减
function decrementCount() { 
    setCount(prevState => prevState - 1) 
}

// 递增
function incrementCount() { 
    setCount(prevState => prevState + 1) 
}

绑定方法

function CounterCom() { 
    const [count, setCount] = useState<number>(0) 
    function decrementCount() { setCount(prevState => prevState - 1) } 
    function incrementCount() { setCount(prevState => prevState + 1) } 
    return <> 
        <button onClick={decrementCount}>-</button>
        <span><strong>{count}</strong></span>
        <button onClick={incrementCount}>+</button>
        </> 
}

这样一个简单的计数器就做好了

2. useEffect

这个Hook的主要功能是除了渲染UI的其他功能，例如，发送请求，手动修改dom等

导入hook
```
import {useEffect} from "react";
```
在组件中调用这个hook
```
    useEffect(()=>{

    })
```
1. 就可以在这个hook中使用发送请求，手动修改dom 的功能
```
useEffect(()=>{
    document.title = "dom"
})
```
以上的useEffect写法每次更新状态都会执行一次，这样是不符合实际操作的，只需要添加一个空数组就只在首次渲染的时候执行了
```
useEffect(()=>{
    document.title = "dom"
}, [])
```
useEffect 还可以添加一个特定依赖项，加上之后就和Vue中的Watch很类似，只有指定监听的状态发生变化时，才会重新执行
```
    useEffect(() => {
        console.log("useEffect", count)
    }, [count])
```
1. 还可以有多个依赖项, 不管是哪个依赖性发生变化都会重新执行
```
    useEffect(() => {
        console.log("useEffect", count)
    }, [count,aaa,bb,cc])
```
当组件被销毁时，需要的一些操作也可以在该hook中写，例如清除定时器，这个功能就类似Vue的beforeDestroy，只需要在useEffect 中return一个箭头方法

useEffect(() => {
    // 定一了一个定时器
    const timer = setInterval(() => {
        console.log(Date.now().toString())
    })

    // 在组件卸载时执行
    return () => {
        clearInterval(timer)
    }
}, [])

学习React 的第三天

1. 简介

1.代码学习

1. useState

2. useEffect